Media query

The Media query in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.

Media queries can be used to check many things:

• width and height of the viewport

• width and height of the device

• Orientation

• Resolution

A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then a style sheet is applied.

Media Types in CSS: There are many types of media types which are listed below:

• all: It is used for all media devices

• print: It is used for printer.

• screen: It is used for computer screens, smartphones, etc.

• speech: It is used for screen readers that read the screen aloud.

Features of Media query: There are many features of media query which are listed below:

• 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 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.

Supported Browsers: The browser supported by CSS media query are listed below:

• Chrome 21.0 and above

• Mozilla 3.5 and above

• Microsoft Edge 12.0

• Opera 9.0 and above

• Internet Explorer 9.0 and above

• Safari 4.0 and above