/CSS3 Media Queries Template
Forked from marcobarbosa/CSS3 Media Queries Template
Created Apr 23, 2018
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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment