Media Queries for Mobile and Tablet devices

The last step of website customization is custom CSS for different devices.
@media query is the way to control the element behavior depend on devices.
Here you can find the media query fits for most of standard devices, and change it depend on what you need.

CSS @Media commands

@media not|only  mediaType and (mediaFeature and|or|not mediaFeature) {
CSS-Code;
}

mediaType all | screen | print | speech
mediaFeature width | min-width | min-device-width
orientation portrait | landscape
resolution | min-resolution (dpi|dppx)
aspect-ratio | min-aspect-ratio
-webkit-min-device-pixel-ratio
min–moz-device-pixel-ratio
-o-min-device-pixel-ratio
min-device-pixel-ratio
any-hover
any-pointer

Mobile Phones

@media only screen
and (min-device-width: 320px) and (max-device-width: 480px)
and (min-device-height: 480px) and (max-device-height: 812px)
and (orientation: portrait)

Tablet

@media only screen
and (min-device-width: 601px) and (max-device-width: 1536px)
and (min-device-height: 906px) and (max-device-height: 2048px)
and (orientation: portrait)

Mobile devices media information

Model Width Height Ratio
IPhone 4, 4S 320px 480px 2
IPhone 5, 5S, 5C, 5SE 320px 568px 2
IPhone 6, 6S, 7, 8 375px 667px 2
IPhone 6+, 7+, 8+ 414px 736px 3
IPhone X 375px 812px 3
IPhone XR 414px 896px 2
IPhone XS MAX 414px 896px 3
Galaxy S3 360px 640px 2
Galaxy S4, S5, Note 320px 640px 3
Galaxy S6 360px 640px 3
Galaxy S7 414px 732px 3.5
Galaxy S8, S9, S9+ 360px 740px 4
Google Pixel XL 411px 731px 3.5
Google Pixel 2 411px 731px 2.6
Google Pixel 2XL 411px 823px 3.5
LG G5 360px 767px 4

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s