CSS Media Queries

Media queries to help designers & developers save some time searching. I'll try to continue adding as much media queries as possible.

iPad | portrait & landscape

Code
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */ }

iPad | portrait

Code
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

iPad | landscape

Code
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */ }

iPhone X | portrait & landscape

Code
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) { /* STYLES GO HERE */ }

iPhone X | portrait

Code
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone X | landscape

Code
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) { /* STYLES GO HERE */ }

Phones | portrait & landscape

Code
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* STYLES GO HERE */ }

Phones | portrait

Code
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) { /* STYLES GO HERE */ }

Phones | landscape

Code
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : landscape) { /* STYLES GO HERE */ }
CSS3