Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 Media Queries template
/*
* Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
@jfrux

This comment has been minimized.

jfrux commented Apr 10, 2013

Very helpful, thank you!

@mreis1

This comment has been minimized.

mreis1 commented Apr 13, 2013

Completely useful. Thanks

@moitorrijos

This comment has been minimized.

moitorrijos commented Apr 26, 2013

Saved me ages!

@oaajayi

This comment has been minimized.

oaajayi commented Aug 5, 2013

Thanks a lot! this is helpful

@panhna

This comment has been minimized.

panhna commented Oct 15, 2013

thanks a lot !

@notredamstra

This comment has been minimized.

notredamstra commented Dec 20, 2013

awesome

@Olliepop

This comment has been minimized.

Olliepop commented Jan 4, 2014

Saved a lot of time thank you!

@ameikle

This comment has been minimized.

ameikle commented Jan 5, 2014

Saved me a lot of time, Thank you!

@nikosantis

This comment has been minimized.

nikosantis commented May 15, 2014

Thanks!

@jbess

This comment has been minimized.

jbess commented Jul 24, 2014

Nice thank

@toklok

This comment has been minimized.

toklok commented Aug 13, 2014

This is really useful, thanks.

@Johnn5

This comment has been minimized.

Johnn5 commented Jul 17, 2015

Thanks mate, saved me a head scratch

@nitin7dc

This comment has been minimized.

nitin7dc commented Aug 10, 2016

Thanks marcobarbosa

@Detsl

This comment has been minimized.

Detsl commented Sep 22, 2016

Thank you!

@chikehenderson

This comment has been minimized.

chikehenderson commented Nov 16, 2016

Good stuff

@AndyNormore

This comment has been minimized.

AndyNormore commented Dec 13, 2016

Thank you, using at SkyRooms.io :)

@babu-aminul

This comment has been minimized.

babu-aminul commented Jan 3, 2017

Thanks

@bgkerion

This comment has been minimized.

bgkerion commented Feb 5, 2017

well done! Thank you

@Arturdko

This comment has been minimized.

Arturdko commented Mar 1, 2017

Thanks for template. Will be used tomorrow.

@Specialist17

This comment has been minimized.

Specialist17 commented Apr 3, 2017

You are a good human, this is very helpful! Thank you!

@Himanshucodee

This comment has been minimized.

Himanshucodee commented Jun 2, 2017

Awesome worrk

@Broomspun

This comment has been minimized.

Broomspun commented Jun 18, 2017

Thanks!

@m0ns1f

This comment has been minimized.

m0ns1f commented Oct 3, 2017

Thanks for the great work

@CChamroeun

This comment has been minimized.

CChamroeun commented Oct 4, 2017

Great! thanks

@fantasmack

This comment has been minimized.

fantasmack commented Oct 26, 2017

Tnks!

@freehandman

This comment has been minimized.

freehandman commented Nov 3, 2017

Cool thanks!

@Mangaclub

This comment has been minimized.

Mangaclub commented Mar 20, 2018

You have a undefined space between 480px and 768 px

@SynysterGrowly

This comment has been minimized.

SynysterGrowly commented Apr 2, 2018

Lo voy a usar. Veré que tal!
Gracias

@toyindawudu

This comment has been minimized.

toyindawudu commented May 20, 2018

Very helpful!!!

@QaisPalekar

This comment has been minimized.

QaisPalekar commented Jun 27, 2018

Thanks!! Saved me a lot of trouble!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment