CSS3 Media Queries / Mobile / iPhone

Below is a list of media queries I use to help my define CSS rules within my stylesheet. Sometimes you just can’t always make your design responsive using math (target / context = result) so here are some media queries. You can also Google media queries CSS3 for more options. Not everything I do is always the best option but I want to help guide you down the right path. Place these queries in your stylesheet.

[css]/* 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 */
}[/css]

About Clifton Hatfield

Clifton is the kind of guy that can read code better than he can read a book and prefers it that way. He likes cold pizza, moving sidewalks, and Indiana Jones. Clifton co-founded Internet Lifestyle Network from his home office in 2012 and he believes that true leadership is to inspire.
0 comments