common media queries of css3

media queries of css3

/* #1- Large desktop */
@media (min-width: 1200px) { ... }

/* #3- Regular sized laptops */
@media (min-width: 980px) and (max-width: 1199px) { ... }

/* #3- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #4- Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) { ... }

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





another queries css3


@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 */ }
I have modified them, leaving them like this

@media screen and (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media screen and (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media screen and (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media screen and (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media screen and (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media screen and (min-width:1281px) { /* hi-res laptops and desktops */ }