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.
Syntax
Media Kinds in CSS
| Value | Description |
|---|---|
| all | For all media devices, it is employed. |
| 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. |