Responsive Design for Various Devices and Resolutions

Responsive Design for Various Devices and Resolutions

Media Queries for various devices and resolutions

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Media queries in a single file to help make your projects more appropriate on different devices and screen resolutions.

How to implement Media Queries

Requires meta tag in HTML

To ensure devices display responsive pages properly, include the viewport meta tag.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Media Queries in CSS

/* Landscape phones and down */
@media screen and (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media screen and (max-width: 767px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media screen and (min-width: 768px) and (max-width: 979px) { ... }
 
/* Large desktop */
@media screen and (min-width: 1200px) { ... }