CSS Media Queries

A responsive site design is made using the Media query in CSS. It indicates that a web page's display varies from system to system depending on the screen or media type. The breakpoint indicates the device width at which the content first begins to distort or break.

Media queries can be used to check many things:

  • Height & Width of the viewport.
  • Height & Width of the device.
  • Orientation.
  • Resolution.

A media type and one or more expressions, each of which can be true or false, make up a media query. If the provided media matches the kind of device the page is displayed on, the query's outcome is true. A style sheet is applied if the media query is accurate.




Media Kinds in CSS

Value Description
all For all media devices, it is employed.
print It is employed for printing.
screen It is utilized in smartphones, computers, and other devices.
speech Screen readers utilize it to read the screen aloud.

Features of media query

Value Description
color The output device's bit-per-color component count.
grid Determines if the device is a bitmap or a grid.
height The height of the viewport.
aspect ratio The proportion of the viewport's width to height.
color-index The amount of colors the gadget can display is called the color-index.
max-resolution The device's dpi and dpmo maximum resolution.
monochrome Bits per color on a monochrome device, or monochromatic.
scan The process of examining output devices.
update How quickly the output device can change.
width The size of the viewport.