Media Query Playground

return to post on jensbits.com

To see how media queries affect the page, desktop: change the viewport size, mobile: rotate and zoom. Then change the values below to test different media query settings.

Viewport size is x

Meta Viewport

<meta name="viewport" content="width=device-width">

remove meta viewport

Device width to

@media screen and (max-device-width: 480px)

This background should be red.

change to min-device-width to
change width to px

@media screen and (max-device-width: 800px)

This background should be green.

change to min-device-width to
change width to px

width to

@media screen and (max-width: 480px)

This background should be blue.

change to min-width to
change width to px

@media screen and (max-width: 800px)

This background should be purple.

change to min-width to
change width to px

Orientation

@media all and (orientation:portrait)

This background should be orange.

@media all and (orientation:landscape)

This background should be yellow.