CSS Media Queries For Responsive Websites

Building a websites to be responsive and user friendly on mobile, tablet and desktop is a must. With the help of responsive CSS libraries like Bootstrap, Foundation, etc there are now CSS media queries that drastically help when creating unique design or stylings across the three main platforms. While there are many more CSS media queries that allow you to drill down into each device type, these are the most common queries used to build and style the different visual elements across device types:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }

@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

 

Categories Bootstrap, CSS3, HTML5

Leave a Reply