Clifton's Exclusive VIP Blogging Strategies
Your name and email address will never be sold.

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

He fell in love with the WordPress Publishing Platform and has been creating themes and plugins for it ever since. He is the kind of guy that can read code better than he can read a book. Often, you can find him hunched over a keyboard delivering his magic. He likes cold pizza, walking on moving sidewalks, and Indiana Jones.
0 comments