Media queries are rules designers can set in CSS3 to ensure their website is responsive on different devices. Media queries allow the layout, HTML blocks, font size, colours, and other design elements to change to accommodate the user.
To work with media queries, designers must choose the breakpoints and rules they want to set. They can then apply the rules when certain conditions and breakpoints are met. These conditions might include viewport width, height, device orientation, or screen resolution.
See also: Responsive design, Breakpoints, Fluid grids
Further reading: What is Responsive Design?
