CSS Media Queries for tablets & mobiles

CSS media queries are an excellent way to deliver different styles to different devices.

Here are the Media Queries for targeting your iPad in portrait or landscape mode. These media queries will target all iPad models.

Ipad Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
     .your-class-here {
         background:black;
    }
}

Ipad Landscape

/* Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
     .your-class-here {
         background:black;
    }
}

Ipad Portrait

/* Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
     .your-class-here {
         background:black;
    }
}

Here are the Media Queries for targeting your iPhone in portrait or landscape mode. These media queries will target iPhone 6+, 7+ and 8+.

iPhone 6+, 7+ and 8+ Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
     .your-class-here {
         background:black;
    }
}

iPhones 6+, 7+, 8+ Portrait

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
     .your-class-here {
         background:black;
    }
}

iPhones 6+, 7+, 8+ Landscape

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
     .your-class-here {
         background:black;
    }
}

Here are the Media Queries for targeting your iPhone X in portrait or landscape mode. These media queries will target the iPhone X.

iPhone X Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .your-class-here {
         background:black;
    }
}

iPhone X Portrait

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
     .your-class-here {
         background:black;
    }
}

iPhone X Landscape

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) {
     .your-class-here {
         background:black;
    }
}

Share:

Facebook
Twitter
LinkedIn

Found This Useful?

Follow us on Twiiter for the latest updates and FREEBIE announcements

You May Also Be Interested In

Comments