Media Query Features
There are many features of media query which are listed below:
| Features | Description |
|---|---|
color | The number of bits per color component for the output device. |
grid | Checks whether the device is grid or bitmap. |
height | The viewport height. |
aspect ratio | The ratio between the width and height of the viewport. |
color-index | The number of colors the device can display. |
max-resolution | The maximum resolution of the device using dpi and dpcm. |
monochrome | The number of bits per color on a monochrome device. |
scan | The scanning of output devices. |
update | How quickly can the output device modify. |
width | The viewport width. |
CSS Media Queries
CSS Media Queries is a powerful tool that allows developers to create responsive web designs. They enable the styling of elements to adapt based on the characteristics of the device displaying the webpage.
Media queries are a feature of CSS that apply specific styles based on the characteristics of the user’s device or viewport. These characteristics can include screen width, height, orientation, resolution, and more. The result of a media query is either true or false, and if true, the specified style sheet is applied.
The breakpoints in @media specify for what device-width size, the content is just starting to break or deform. The CSS2 rule introduced different style rules for different media types.
Media queries can be used to check many things:
- Width and Height of the Viewport
- Width and Height of the Device
- Orientation
- Resolution
Contact Us