A tutorial by William Walker

Media Query Demo

Min Width

This paragraph will only be seen above 600px.

Max Width

This paragraph will only be seen below 700px.

Min and Max Width

This paragraph will only be seen between 600px and 700px.

Multiple Min and Max Width

This paragraph will only be seen between 600px and 700px, and again below 500px.

Orientation: Portrait

This paragraph will only be seen in portrait mode.

Orientation: Landscape

This paragraph will only be seen in landscape mode.

Pixel Density of 1

This paragraph will appear if the pixel density is 1.

This paragraph will appear if the pixel density is at least 1.

Pixel Density of 1.5

This paragraph will appear if the pixel density is 1.5.

This paragraph will appear if the pixel density is at least 1.5.

Pixel Density of 2

This paragraph will appear if the pixel density is 2.

This paragraph will appear if the pixel density is at least 2.