Media rule in CSS is very attractive way to define different style rules for various types of screens(tablets/mobile screen) Media queries look at the capability of the device and be used to check various things:
- Height and Width of the screen
- Orientation and background of the screen
- Resolution of the viewport
- Height and width of the tablet desktop and mobile screens
For Example:-
@media only screen and (max-width:768px){background-color:blue }
@media only screen and (max-width: 360px){background-color:red }
In the above example, The first media is set at 768 pixel and this resolution is used for the table screen while at 360 pixel it will be used for mobile screen and at this screen the background will change from blue to red.
0 Comment(s)