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.For tablets
2nd declaration, would work for tablets and other devices like small laptops with screen sizes larger than 768px but less than 1240px.For desktop
The last one, would be for desktop devices that has screen width larger than 1240px.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.