Meta Viewport

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

Device width to

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

This background should be red.

  • px

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

This background should be green.

  • px

width to

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

This background should be blue.

  • px

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

This background should be purple.

  • px

Orientation

@media all and (orientation:portrait)

This background should be orange.

@media all and (orientation:landscape)

This background should be yellow.