Responsive notes

responsive.md

Viewport

Without viewport META tag the mobile browser will render desktop site.

Basic viewport declaration

<meta name="viewport">

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

Other options

• initial-scale=1
• maximum-scale=1
• user-scalable=no
• width=500

Media Queries

Print

@media print { ... }

Screen

@media screen { ... }

Other useful queries

@media (orientation: portrait) { ... }

@media (orientation: landscape) { ... }

@media (height: 500px) { ... }

@media (width: 500px) { ... }

@media (device-width: 500px) { ... }

@media (device-aspect-ratio: 16/9) { ... }

@media tv { ... }

Min vs Max Width combination

@media screen and (max-width: 960px) { ... }

@media screen and (min-width: 961px) and (max-width: 1280px) { ... }

@media screen and (min-width: 1281px) and (max-width: 1336px) { ... }

@media screen and (min-width: 1336px) { ... }