Home >>CSS Tutorial >CSS Media Queries

CSS Media Queries

CSS Media Queries

CSS media queries allow you to create responsive web design. It means that the presentation of web pages different in specific range of devices like mobile phones, desktop, tablets, etc.

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

A media query consists of a media type, zero or more expressions that match the conditions of a particular device width or screen resolution. It is also consist of media type that can contain one or more expression which can be either true or false.

  1. The media query technique is firstly used by CSS3.
  2. The media query feature which commonly used is “width”.
  3. Media query became W3C recommendation in June 2012.
  4. For including a block of CSS properties, it uses the @media rule for a certain condition.
  5. It was found in CSS2 that it is an extension of media stylesheet which is used in different media types(i.e. screen)

By using media queries you can be checked many things:

  • width and height of viewport
  • width and height of device
  • Resolution
  • Orientation

Syntax:
@media not | only mediatype and (expression) { // Code content }
Let's take an Example of css media query:

<!DOCTYPE html> 
<html> 
	<head> 
		<title>CSS media query</title> 
		<style> 
			    @media screen and (min-width:480px) { 
				.tpoint { 
					text-align:center; 
					background-color:#98d1f5;
                   font-size: 35px;	
                    height:350px;
                    font-weight: bold					
				} 
			
			} 
			@media screen and (min-width:768px) { 
				.tpoint { 
					text-align:center; 
					background-color:#f056ab;
                   color:#fff;	
                   border:5px solid #000;				   
				} 
			} 
		</style> 
	</head> 
	<body> 
		<div class = "tpoint">PHPTPOINT <br>The div changes color when resize the browser window. </div> 
	</body> 
</html>	
Output:
PHPTPOINT
The div changes color when resize the browser window.

CSS3 Media Types

Value Description
All It can be used for all media devices.
Speech It is used for screen readers that reads the page out loud.
Print It can be used for printers.
Screen It is used for smartphones, tablets, computer screens, etc.

Features of Media query

These are the following features of media query:

Feature Description
color It specifies number of bits per color component for output device.
grid It is true for a grid-based device or to Checks whether the device is grid or bitmap.
height It specify the viewport height of the rendering surface.
Device-aspect-ratio It specify the ratio between width and height of device.
color-index It specifies the number of entries in the color lookup table can display.
max-resolution It specify the maximum resolution of the of the device using dpcm and dpi.
monochrome It specifies the number of bits per color or per pixel in a monochrome device buffer.
scan It specifies the scanning process of output devices media types.
Update It specify that how quickly can output device modify.
width It specify the viewport width of the rendering surface.

How to add a breakpoint?

CSS media queries allow you to create responsive web design. It means that the breakpoints is used for presentation of web pages different in specific range of devices like mobile phones, desktop, tablets, etc., where you want that the certain parts of the design will behave differently on each side of the breakpoints.

Let's take an example:

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

<!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: orange;
    color: white;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#498bd1;
    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: #498bd1;
    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>PHPTPOINT</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>JSON</li>
<li>C/C++</li>
<li>Java</li>
<li>SQL</li>
<li>Android</li>
<li>Oracle</li>
<li>Cloud Computing</li>
<li>JQuery</li>
<li>MongoDB</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>About Phptpoint</h1>
<p>phptpoint 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>DEVELOPERS TUTORIAL</h2>
<p>Wlcome to Phptpoint</p>
<p>Wlcome to Phptpoint</p>
<p>Wlcome to Phptpoint</p>
<p>Wlcome to Phptpoint</p>
<p>Wlcome to Phptpoint</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>
Output:


PHPTPOINT

About Phptpoint

phptpoint is written and developed that students may learn computer science related technologies easily.

DEVELOPERS TUTORIAL

Wlcome to Phptpoint

Wlcome to Phptpoint

Wlcome to Phptpoint

Wlcome to Phptpoint

Wlcome to Phptpoint

Resize the browser window to see how the content respond to the resizing.