What is Media Query? (An Overview of Media Features)

media query

A CSS3 module called CSS Media query is recommended by the W3C and is used to adjust screen resolution (e.g., Smartphone screen vs. computer screen).

The CSS3 standard introduced the media query mechanism. In June 2012, the W3C recommended it. It is an expansion of the media-dependent stylesheets discovered in CSS2 that are utilized in various media types (such as screen and print). "Width" is the media property that is most frequently employed. It uses the @media rule to only include a block of CSS attributes when a specific requirement is met.

List Of Recommended Media Features For Media Queries

Below is a list of media features W3C recommends for media queries.

FeatureValueMin/MaxDescription
ColorIntegeryesIt details how many bits are used for each color component.
Color-indexIntegeryesIt details how many entries there are in the color lookup table.
Device-aspect-ratioInteger/integeryesThis information describes the device's aspect ratio.
Device-heightLengthyesIt provides the output device's height information.
Device-widthLengthyesThe width of the output device is specified.
GridIntegernoFor a device built on a grid, it is accurate.
HeightLengthyesIt gives information on the height of the rendering surface.
MonochromeIntegeryesIn a monochrome frame buffer, it specifies how many bits are used for each pixel.
ResolutionResolution ("dpi" or "dpcm")yesIt provides information about the display screen's resolution.
Scan"Progressive" or "Interlaced"noIt describes the television media types' scanning process.
WidthLengthyesIt provides rendering surface width specifications.

Responsive Web Design

Ethan Marcotte is credited with coining the phrase "responsive web design." It enables you to gradually improve a web page for various viewing contexts, such as desktop, smartphone, tablet, etc., by flexible images, using fluid grids and media queries.

What Screen Resolutions Do You Use While Taking Screenshots?

Smartphone: 320px

Tablet: 768px

Desktop: 1600px

Below is an example that explains media query usage:

If your window is resized to less than 500px, the background color will be changed.

Example

<!DOCTYPE html>  

<html>  

<head>  

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

<style>  

body {  

    background-color: green;  

}  

  

@media only screen and (max-width: 500px) {  

    body {  

        background-color: pink;  

    }  

}  

</style>  

</head>  

<body>  

<p>The background color of this document is "pink" if your browser window is resized to a width of less than 500 pixels; if not, it is "green."</p>  

</body>  

</html>

Adding A Breakpoint To The Media Query

A responsive website can be made using media query. The breakpoint is used on web pages when it is desired for specific design elements to behave differently on either side of the breakpoint.

Observe the following example.

Example

In this example, we add a breakpoint at 768 pixels using a media query. 

<!DOCTYPE html>  

<html>  

<head>  

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

<style>  

* {  

    box-sizing: border-box;  

}  

.row: after {  

    content: " ";  

    clear: both;  

    display: block;  

}  

[class*="col-"] {  

    float: left;  

    padding: 15px;  

}  

html {  

    font-family: "Lucida Sans", sans-serif;  

}  

.header {  

    background-color: green;  

    color: black;  

    padding: 15px;  

}  

.menu ul {  

    list-style-type: none;  

    margin: 0;  

    padding: 0;  

}  

.menu li {  

    padding: 8px;  

    margin-bottom: 7px;  

    background-color : yellow;  

    color: #bb56d6;  

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  

}  

.menu li: hover {  

    background-color: #0099cc;  

}  

.aside {  

    background-color: blue;  

    padding: 15px;  

    color: #b42c11;  

    text-align: center;  

    font-size: 14px;  

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  

}  

.footer {  

    background-color: #0099cc;  

    color: #ffffff;  

    text-align: center;  

    font-size: 12px;  

    padding: 15px;  

}  

/* For mobile phones: */  

[class*="col-"] {  

    width: 100%;  

}  

@media only screen and (min-width: 600px) {  

    /* For tablets: */  

    .col-m-1 {width: 8.33%;}  

    .col-m-2 {width: 16.66%;}  

    .col-m-3 {width: 25%;}  

    .col-m-4 {width: 33.33%;}  

    .col-m-5 {width: 41.66%;}  

    .col-m-6 {width: 50%;}  

    .col-m-7 {width: 58.33%;}  

    .col-m-8 {width: 66.66%;}  

    .col-m-9 {width: 75%;}  

    .col-m-10 {width: 83.33%;}  

    .col-m-11 {width: 91.66%;}  

    .col-m-12 {width: 100%;}  

}  

@media only screen and (min-width: 768px) {  

    /* For desktop: */  

    .col-1 {width: 8.33%;}  

    .col-2 {width: 16.66%;}  

    .col-3 {width: 25%;}  

    .col-4 {width: 33.33%;}  

    .col-5 {width: 41.66%;}  

    .col-6 {width: 50%;}  

    .col-7 {width: 58.33%;}  

    .col-8 {width: 66.66%;}  

    .col-9 {width: 75%;}  

    .col-10 {width: 83.33%;}  

    .col-11 {width: 91.66%;}  

    .col-12 {width: 100%;}  

}  

</style>  

</head>  

<body>  

  

<div class="header">  

<h1>HubToLearn</h1>  

</div>  

  

<div class="row">  

<div class="col-3 col-m-3 menu">  

<ul>  

<li>CSS</li>  

<li>Java</li>  

<li>SQL</li>  

<li>WordPress</li>  

<li>HTML</li>  

<li>C++</li>  

<li>C#</li>  

<li>Azure</li>  

<li>Dart</li>  

<li>Uncategorized</li>  

<li>Move</li>  

<li>HTML Tutorial</li>  

  

</ul>  

</div>  

  

<div class="col-6 col-m-9">  

<h1>About HubToLearn</h1>  

<p>HubToLearn is written and developed to provide in-depth knowledge to students to learn computer science-related technologies with ease.</p>  

</div>  

  

<div class="col-3 col-m-12">  

<div class="aside">  

<h2>What is HubToLearn</h2>  

<p>HubToLearn is an online training institute with a world audience on its way to being number 1.

 You will get practical trainings on several computer programming topics.</p>  

<h2>Why HubToLearn?</h2>  

<p>Life Time Validity, Training by Professionals, Problem Solving Team, Project Development.

</p>  

<h2>How to contact us?</h2>  

<p> Visit our website https://hubtolearn.com/</p>  

</div>  

</div>  

  

</div>  

  

<div class="footer">  

<p>To see how the content responds to resizing, adjust the browser window.</p>  

</div>  

  

</body>  

</html>

To learn more about CSS, visit our CSS Tutorial Page.