CSS3 Media Queries

Reading Time: < 1 minute

CSS3 is the latest evolution of the Cascading Style Sheet language and it brings a lot features like animations, transistions, gradients, grid layouts and more. The main important feature is make the web more responsive and accessible for all devices. Here is the complete media queries for various devices.

CSS3 Media Query for Desktops & Hi Resolution Laptop

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

 

CSS3 Media Query for Desktops, Tablet Landscape, Laptops

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

 

CSS3 Media Query for Desktops, Tablets, Landscape iPad, Low-Res Laptops

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

 

CSS3 Media Query for Portrait Tablets & iPad, Landscape e-Readers, Mobiles

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

 

CSS3 Media Query for Mobiles, Small e-readers

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

 

Target Device Media Query

If you want to target a device then just write min-device-width. For example

For iPhone

@media only screen and (min-device-width: 480px){}

For Tablets

@media only screen and (min-device-width: 768px){}

Use some important points while you are desiging your next responsive website template with css3

• develop the site for mobile first using percentages or ems, not pixels,
• then try it in a larger viewport and note where it begins to fail,
• redesign the layout and add a CSS media query just to handle the broken parts,
• repeat the process until you reach the next breakpoint.