Media Screen sizes of Mobile Phone Tablets and Laptops

By: Prof. Fazal Rehman Shamil
Last modified on February 8th, 2021

Suppose, we want to apply the given CSS effect only one device with a maximum width of 400 px, then we can write it as;

Example 1

Media Screen sizes of Mobile Phone Tablets

@media (max-width: 400px)

{
.a{ background-color:#FF0000; }

}

This Code will apply background color only on devices with width  <= 400px. It will not work on display screens with >400px.

Example 2

Responsive Media Screen sizes

@media (min-width: 400px)

{
.a{ background-color:#FF0000; }

}

This Code will apply background color on devices with width at least 400px. It means that this CSS will work on mobile phones, laptops and desktop screen etc.

Copy the Code and try it in online Editor

Laptops

Non-Retina Screens, Retina Screens.

Windows Phones

Windows Phone, Portrait, and Landscape.

Galaxy

Galaxy S3, Portrait, and Landscape, Galaxy S6.

HTC Phones

HTC One Portrait and Landscape.

iPhones

iPhone 4 and 4S, Portrait and Landscape, iPhone 5, 5S, 5C and 5SE, iPhone 6, 6S, 7 and 8.

Google Pixel

Google Pixel Portrait and Landscape, Google Pixel XL.

iPads Tablets

iPad 1, 2, Mini and Air, Portrait and Landscape,  iPad 3, 4 and Pro 9.7, iPad Pro 10.5.

Galaxy Tables

Galaxy Tab 2 Portrait and Landscape, Galaxy Tab S.

Nexus Tablets

Nexus 7 Portrait and Landscape, Nexus 9.

6AV2124-0QC02-0AX0