Skip to content

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.

Copy link

@jfrux jfrux commented Apr 10, 2013

Very helpful, thank you!

@mreis1

This comment has been minimized.

Copy link

@mreis1 mreis1 commented Apr 13, 2013

Completely useful. Thanks

@moitorrijos

This comment has been minimized.

Copy link

@moitorrijos moitorrijos commented Apr 26, 2013

Saved me ages!

@oaajayi

This comment has been minimized.

Copy link

@oaajayi oaajayi commented Aug 5, 2013

Thanks a lot! this is helpful

@panhna

This comment has been minimized.

Copy link

@panhna panhna commented Oct 15, 2013

thanks a lot !

@notredamstra

This comment has been minimized.

Copy link

@notredamstra notredamstra commented Dec 20, 2013

awesome

@Olliepop

This comment has been minimized.

Copy link

@Olliepop Olliepop commented Jan 4, 2014

Saved a lot of time thank you!

@ameikle

This comment has been minimized.

Copy link

@ameikle ameikle commented Jan 5, 2014

Saved me a lot of time, Thank you!

@nikosantis

This comment has been minimized.

Copy link

@nikosantis nikosantis commented May 15, 2014

Thanks!

@jbess

This comment has been minimized.

Copy link

@jbess jbess commented Jul 24, 2014

Nice thank

@toklok

This comment has been minimized.

Copy link

@toklok toklok commented Aug 13, 2014

This is really useful, thanks.

@Johnn5

This comment has been minimized.

Copy link

@Johnn5 Johnn5 commented Jul 17, 2015

Thanks mate, saved me a head scratch

@nitin7dc

This comment has been minimized.

Copy link

@nitin7dc nitin7dc commented Aug 10, 2016

Thanks marcobarbosa

@Detsl

This comment has been minimized.

Copy link

@Detsl Detsl commented Sep 22, 2016

Thank you!

@chikehenderson

This comment has been minimized.

Copy link

@chikehenderson chikehenderson commented Nov 16, 2016

Good stuff

@AndyNormore

This comment has been minimized.

Copy link

@AndyNormore AndyNormore commented Dec 13, 2016

Thank you, using at SkyRooms.io :)

@babu-aminul

This comment has been minimized.

Copy link

@babu-aminul babu-aminul commented Jan 3, 2017

Thanks

@bgkerion

This comment has been minimized.

Copy link

@bgkerion bgkerion commented Feb 5, 2017

well done! Thank you

@Arturdko

This comment has been minimized.

Copy link

@Arturdko Arturdko commented Mar 1, 2017

Thanks for template. Will be used tomorrow.

@farochocolom

This comment has been minimized.

Copy link

@farochocolom farochocolom commented Apr 3, 2017

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

@Himanshucodee

This comment has been minimized.

Copy link

@Himanshucodee Himanshucodee commented Jun 2, 2017

Awesome worrk

@Broomspun

This comment has been minimized.

Copy link

@Broomspun Broomspun commented Jun 18, 2017

Thanks!

@m0ns1f

This comment has been minimized.

Copy link

@m0ns1f m0ns1f commented Oct 3, 2017

Thanks for the great work

@CChamroeun

This comment has been minimized.

Copy link

@CChamroeun CChamroeun commented Oct 4, 2017

Great! thanks

@fantasmack

This comment has been minimized.

Copy link

@fantasmack fantasmack commented Oct 26, 2017

Tnks!

@cyprian-nziim

This comment has been minimized.

Copy link

@cyprian-nziim cyprian-nziim commented Nov 3, 2017

Cool thanks!

@Mangaclub

This comment has been minimized.

Copy link

@Mangaclub Mangaclub commented Mar 20, 2018

You have a undefined space between 480px and 768 px

@SynysterGrowly

This comment has been minimized.

Copy link

@SynysterGrowly SynysterGrowly commented Apr 2, 2018

Lo voy a usar. Veré que tal!
Gracias

@toyindawudu

This comment has been minimized.

Copy link

@toyindawudu toyindawudu commented May 20, 2018

Very helpful!!!

@QaisPalekar

This comment has been minimized.

Copy link

@QaisPalekar QaisPalekar commented Jun 27, 2018

Thanks!! Saved me a lot of trouble!!

@brookmant

This comment has been minimized.

Copy link

@brookmant brookmant commented Dec 5, 2019

I love you

@WaiYan2510

This comment has been minimized.

Copy link

@WaiYan2510 WaiYan2510 commented Dec 18, 2019

Thanks !!! it is very helpful.

@ptlu79

This comment has been minimized.

Copy link

@ptlu79 ptlu79 commented Apr 5, 2020

Very helpful, thanks.

@imamuddinwp

This comment has been minimized.

Copy link

@imamuddinwp imamuddinwp commented May 4, 2020

Greate!!!

@rodrigoramirez93

This comment has been minimized.

Copy link

@rodrigoramirez93 rodrigoramirez93 commented Jun 6, 2020

Thanks!

@qwertydelle

This comment has been minimized.

Copy link

@qwertydelle qwertydelle commented Jun 23, 2020

Thx for this

@sangambk1199

This comment has been minimized.

Copy link

@sangambk1199 sangambk1199 commented Oct 13, 2020

Thanks a lot!

@bruno28300

This comment has been minimized.

Copy link

@bruno28300 bruno28300 commented Oct 14, 2020

Merci beaucoup (Thanks a lot!)

@jclarx

This comment has been minimized.

Copy link

@jclarx jclarx commented Oct 20, 2020

very helpful. thank you

@nickordoodle

This comment has been minimized.

Copy link

@nickordoodle nickordoodle commented Nov 20, 2020

very useful, thanks!

@Yeralkhan

This comment has been minimized.

Copy link

@Yeralkhan Yeralkhan commented Feb 22, 2021

so it means everything in css will be written in these media queries?
starting from large screens?

@jclarx

This comment has been minimized.

Copy link

@jclarx jclarx commented Feb 22, 2021

It looks like this was written ten years ago, and I suppose screens have changed somewhat since then.
As this template is nicely done, I wonder if anyone has forked an update that includes newer technology?

@hughesmarissa

This comment has been minimized.

Copy link

@hughesmarissa hughesmarissa commented Jul 31, 2021

Thank you for providing this! You are incredible

@mohammed1913

This comment has been minimized.

Copy link

@mohammed1913 mohammed1913 commented Aug 18, 2021

great job!!

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