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 |