Media queries are one of the latest features of CSS3 used to define responsive styles for devices of different shapes and sizes.
They are the powerful CSS tool which makes it easy to create responsive design for tablets, desktop, mobiles devices. They can help adjusting the Height, Width, Viewport, Orientation and Resolution.
The media queries detect the device type, screen resolutions and orientations, then applies the styles according to the media.
Example: Change body background is screen size is greater than or equals to 480px.
@media screen and (min-width: 480px) {
body {
background-color: #ffffff;
}
}
How does CSS3 support the responsive web designing..?
CSS3 has come up with a media query feature. It supports RWD (Responsive Web Design) and does help in making a website responsive.