Question: What is media query? How a media query is is used?
0

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Low

ait(26) • 1.8k views
ADD COMMENTlink
modified 19 months ago  • written 21 months ago by gravatar for yamini_patil_28 yamini_patil_28690
2

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) {
CSS-Code;
}
  • 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.
ADD COMMENTlink
written 19 months ago by gravatar for yamini_patil_28 yamini_patil_28690
Please log in to add an answer.