What is media query? How a media query is is used?

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Low

ait(26) • 2.1k  views

Media Query

  • The @media rule is used in media queries to apply different styles for different media types/devices. For example, you can specify that certain styles are only for printed documents, or for screens, or for screen readers (mediatype: print, screen, or speech). In addition to media types, there are also media features.
  • Media queries can be used to check many things, such as:
    • width and height of the viewport
    • width and height of the device
    • orientation (is the tablet/phone in landscape or portrait mode?)
    • resolution

How a media query is used?

- Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {
  • The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Please log in to add an answer.

Next up

Read More Questions

If you are looking for answer to specific questions, you can search them here. We'll find the best answer for you.


Study Full Subject

If you are looking for good study material, you can checkout our subjects. Hundreds of important topics are covered in them.

Know More