CSS3's media queries expanded on the concept of media types introduced in CSS2 by looking at a device's capabilities rather than its type.
Many items can be checked with media queries, including:
width and height of the viewport
width and height of the device
(Is the tablet or phone in portrait or landscape mode?)
One well-liked method for distributing a customized style sheet to PCs, laptops, tablets, and mobile phones is to use media queries (such as iPhone and Android phones).
Media query Example:
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: right;}
#main {margin-right: 216px;}
}
Conclusion:
By using media queries, You can make a good and responsive website.
People may also search this:
min width and max-width CSS
css media query mobile
media query css min and max
scss media
responsive media queries
media query for all devices
media css mobile
media css responsive
css media query min and max
media query for all mobile devices