Explain in detail Media Queries with an example.

154views

written 6.3 years ago by

binitamayekar ★ 6.6k

Media Query

The World Wide Web (W3C) introduced the media query as a part of the CSS 3 standard in June 2012.
Media queries are used to define completely different styles for different browser sizes.
Media Query is a CSS 3 module allowing different media types and features to adapt different styles for individual device viewport, device orientation, and many more.
Media Query is a combination of media type and an expression that tells how a Web page would appear on a particular device.
It consists of different media types such as: aural, braille, handheld, print, projection, screen, tv etc.
Each media type is followed by different expressions that check conditions of particular media features such as: width, height, device-width, device-height, orientation, resolution, grid, color.
It uses logical expression true or false. When the media features and values allocated is true then the given style is applied. The expression and value allocated is false, the style is ignored.

Initializing Media Queries:

There are a couple of different ways to use media queries, such as:
- @media rule inside of an existing style sheet. @media all and (max-width: 1024px) {...CSS Code}
- Importing a new style sheet using the @import rule. @import url(styles.css) all and (max-width: 1024px) {...CSS Code}
- By linking to a separate style sheet within the HTML document. <link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
Generally speaking it is recommended using the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

Logical Operators in Media Queries:

Logical operators in media queries help to build powerful expressions.
There are three different logical operators available for use within media queries, including and, not, and only.

Operator and

Using the ‘and’ logical operator within a media query allows an extra condition to be added, making sure that a browser or devices does both a, b, c, and so forth.
Multiple individual media queries can be comma separated, acting as an unspoken or operator.
The example below selects all media types between 800 and 1024 pixels wide @media all and (min-width: 800px) and (max-width: 1024px) {...CSS Code}

Operator not

The ‘not’ logical operator negates the query, specifying any query but the one identified.
In the example below the expression applies to any device that does not have a color screen. Black and white or monochrome screens would apply here for example. @media not screen and (color) {...CSS Code}

Operator only

The ‘only’ logical operator is a new operator and is not recognized by user agents using the HTML4 algorithm, thus hiding the styles from devices or browsers that don’t support media queries.
Below, the expression selects only screens in a portrait orientation that have a user agent capable of rending media queries. @media only screen and (orientation: portrait) {...CSS Code}

Media Features:

Media features identify what attributes or properties will be targeted within the media query expression.
Media features are used to set conditions in media queries.
Some media features are height, width, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan and grid.

Example of Media Query:

In following example when the browser window width matches the condition of the given media query then the associated CSS style is applied.

<!DOCTYPE html>
<html>
<head>
<title>Media Query Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (min-width: 320px) and (max-width: 480px){
body{ background-color: yellow; }
}
@media only screen and (min-width: 481px) and (max-width: 1000px){
body{ background-color: violet; }
}
@media only screen and (min-width: 1001px) and (max-width: 1400px){
body{ background-color: lightblue; }
}
</style>
</head>
<body>
<center>
<h1 style="font-size:10vw">Example of Media Query</h1>
<h1>According to screen size background-color is displayed.<br>
If screen size changes background-color also changes</h1>
</center>
</body>
</html>

ADD COMMENT EDIT