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.

The media query technique is firstly used by CSS3.
The media query feature which commonly used is “width”.
Media query became W3C recommendation in June 2012.
For including a block of CSS properties, it uses the @media rule for a certain condition.
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:

About Phptpoint

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

DEVELOPERS TUTORIAL

Wlcome to Phptpoint

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

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads