How to customize CSS based on screen size?

Responsive Web Design is nowadays very important. The more customization you need, the more impact it can have on tablets and mobile devices. CSS @media rule comes in handy here. Three the most popular are:

For mobile

The declaration below, would work for mobile devices with screen sizes smaller than 768px.

@media only screen and (max-width: 768px) {

    /* Custom CSS declaration for mobile devices */

}

For tablets

2nd declaration, would work for tablets and other devices like small laptops with screen sizes larger than 768px but less than 1240px.

@media only screen and (min-width: 769px) and (max-width: 1239px) {

    /* Custom CSS declaration for mobile devices */

}

For desktop

The last one, would be for desktop devices that has screen width larger than 1240px.

@media only screen and (min-width: 1240px) {

    /* Custom CSS declaration for mobile devices */

}

Above @media declarations are only examples that most of you use, so please notice that you are not limited with them only but may define your own instead.

How to customize CSS based on screen size?

For mobile

For tablets

For desktop

Related articles: