CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

What is Media Query?

CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen).

The media query technique first used in CSS3.
It became a W3C recommendation in June 2012.
It is an extension of media dependent stylesheets used in different media types (i.e. screen and print) found in CSS2.
The most commonly used media feature is "width".
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Recommended Media features for Media queries

Following is a list of media features recommended for media queries by W3C.

Feature	Value	Min/Max	Description
color	integer	yes	It specifies the number of bits per color component.
color-index	integer	yes	It specifies the number of entries in the color lookup table.
device-aspect-ratio	integer/integer	yes	It specifies the aspect ratio of the device.
device-height	length	yes	It specifies the height of the output device.
device-width	length	yes	It specifies the width of the output device.
grid	integer	no	It is true for a grid-based device.
height	length	yes	It specifies the height of the rendering surface.
monochrome	integer	yes	It specifies the number of bits per pixel in a monochrome frame buffer.
resolution	resolution ("dpi" or "dpcm")	yes	It specifies the resolution of the display screen.
scan	"progressive" or "interlaced"	no	It specifies scanning process of "tv" media types.
width	length	yes	It specifies the width of the rendering surface.

What is Responsive Web Design?

The term Responsive Web Design was given by Ethan Marcotte. It facilitates you to use fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts i.e. Desktop, Smartphone, Tablet etc.

What screen resolutions do you use while taking screenshots?

Smartphone: 320px

Tablet: 768px

Netbook: 1024px

Desktop: 1600px

Let's take an example to see the simple use of media query:

This example specifies that if you resize your window less than 500px, the background color will be changed.

See this example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
    background-color:yellow;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:green;
    }
}
</style>
</head>
<body>
<p>If you resize the browser window and the width of this document is less than 500 pixels, the background-color is "green", otherwise it is "yellow"</p>
</body>
</html>

Test it Now

How to add a breakpoint?

Media query can be used to create a responsive webpage. The breakpoint is used on web pages where you want that certain parts of the design will behave differently on each side of the breakpoint.

Let's take an example:

Here we use a media query to add a breakpoint at 768px.

See this example:

<!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: purple;
    color: pink;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :green;
    color: #ffffff;
    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: green;
    padding: 15px;
    color: #ffffff;
    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>JavaTpoint</h1>
</div>

<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>C/C++</li>
<li>Java</li>
<li>SQL</li>
<li>Android</li>
<li>HTML</li>
<li>CSS</li>
<li>Cloud Computing</li>
<li>PHP</li>
<li>JSON</li>
<li>JQuery</li>
<li>MongoDB</li>
<li>Oracle</li>

</ul>
</div>

<div class="col-6 col-m-9">
<h1>About JavaTpoint</h1>
<p>JavaTpoint is written and developed that students may learn computer science related technologies easily.</p>
</div>

<div class="col-3 col-m-12">
<div class="aside">
<h2>What is JavaTpoint?</h2>
<p>JavaTpoint is the No.1 Java training institute in Noida, Delhi, Gurgaon, Ghaziabad and Faridabad.
 You will get practical training on Java by our Java expert who have 7+ year industrial experience.</p>
<h2>Why JavaTpoint?</h2>
<p>Life Time Validity, Training by Java Professionals, Problem Solving Team, Project Development,
 Small Batches to focus on each student
</p>
<h2>How to reach?</h2>
<p>JavaTpoint is located in Noida (Gautam Budhh Nagar). The full address is G-13 Second 
Floor Sector 3 (Near Sector-16 Metro Station)
Noida(U.P)</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

Test it Now

Next TopicCSS 2d Transforms

← prev next →