How do media queries work in responsive web design, and what is their significance?

Question

Ashutosh Patel · Answer

Media queries are a feature of CSS used to apply styles based on the characteristics of the user's device, such as screen size, resolution, or orientation. They are essential for creating responsive web designs, where a website adapts to different screen sizes (from mobile phones to desktop monitors).A media query checks specified conditions, and if the device meets those conditions, the styles within the media query are applied. This allows developers to change the layout, font size, and other design elements based on the device's width, height, and resolution. Example In the example above if the viewport width is 768 pixels or smaller, the font size will be reduced, and .container will change to a column layout. Media queries are important for ensuring that websites are usable and aesthetically pleasing on devices of all sizes, from smartphones to large desktop displays.

interview

How do media queries work in responsive web design, and what is their significance?

Can you answer this question?

1 Answers