CSS Media Queries
The CSS media query is used to create a responsive web page. The media queries modify the HTML elements of the web page depending on its screen size or other characteristics and parameters such as screen resolution and browser viewport width.
The media queries are used to check certain things, such as:
- Height and width of the viewport
- Height and width of the device
- Device orientation
- Screen resolution
The media query consists of a media type and countless media feature expressions. We can also combine multiple media queries with the help of logical operators.
With the help of media queries, we can specify the different CSS properties for devices of different sizes such as laptops, desktops, mobile phones, etc. We can also specify a particular styling for printed documents or screen readers.
Syntax of Media Query
To add the media queries into the CSS, we have to first add the @media rule that wraps the elements with conditions that tell when and where to apply the CSS properties to a particular element.
@media not|only mediatype and (expression)
{
HTML element/Selector
{
/* CSS Properties*/
property: value;
}
}
The not, only, and and Keywords in CSS
| Keyword |
Description |
| not |
The not keyword returns the meaning of the entire media query. |
| only |
The only feature that restricts the older browsers from using media queries with media features that are applied to the specified styles. |
| and |
The and feature is used to merge the media feature with a media type and with another media feature. |
Media Types in CSS
| S.No. |
Value |
Description |
| 1. |
all |
This is the default value that is used for all media types. |
| 2. |
print |
This value is used for printers. |
| 3. |
screen |
This value is used for computer screens, tablets, and smartphones. |
| 4. |
speech |
This value is used for screen readers. |
Example of Media Query in CSS
In the given example we have specified the CSS background-color property for the body element with a value of #e6a7f2. This value can be accepted by the element when the screen width of the element is 500px or more than that.
<!DOCTYPE html>
<html>
<head>
<title>CSS Media Queries</title>
<style>
body {
background-color: #7edff7;
}
@media screen and (min-width: 500px) {
body {
background-color: #e6a7f2;
}
}
</style>
</head>
<body>
<h1>When you resize the browser, you will e the effect.</h1>
<p>The media query will only apply if the media type is screen and the viewport is 500px wide or wider.</p>
</body>
</html>
Output:
Min-width and Max-width in CSS
The min-width and the max-width properties are used to set the minimum width and the maximum width of the screen. This property is used when we want to set a CSS property for an element at particular screen size.
So, the min-width property specifies the minimum width of the device's screen or any element and the max-width property specifies the maximum width of the device's screen or any element
Example of min-width and max-width
In the given example we have specified the min-width to 400px and the max-width to 750px and then we have specified some CSS properties. So the specified CSS properties can be applied to the element only when the device's width is lies between 400px to 750px.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Media Query</title>
<style>
@media screen and (max-width: 750px) and (min-width: 400px) {
div.example {
font-size: 50px;
padding: 50px;
border: 2px solid black;
background: #73ddf5;
}
}
</style>
</head>
<body>
<h3>Resize the browser to see the effects.</h3>
<div class="example">Hello!</div>
</body>
</html>
Output:
CSS media queries for columns
The media queries allow us to create a flexible layout module that can change its layout from multiple columns to full-width columns based on the different screen sizes.
Example: Creating responsive columns using media queries
In the following example, we have created a multiple-column layout that varies between four, two, and full-width layout based on the screen size.
<!DOCTYPE html>
<html>
<head>
<title>CSS Media Queries</title>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Multiple Column Layout</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
</div>
</div>
</body>
</html>
Output:
Adding a Breakpoint using CSS
The CSS breakpoints are used to make the web layout respond according to the device's screen size. It helps in making the best possible layout for the user for each screen size. These breakpoints are used with the CSS media queries to make a web page layout change its layout according to the specified screen width.
Example: Adding breakpoint using media queries
In this example, we have created a grid layout that changes its layout according to the screen size. This can be done using CSS media queries and breakpoints.
<!DOCTYPE html>
<html>
<head>
<title>CSS Media Queries</title>
<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: #ff9100;
color: #000000;
padding: 6px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 4px;
margin-bottom: 7px;
background-color: #f5c92a;
color: #000000;
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: #ff9100;
}
/* 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Stdytonight</h1>
</div>
<div class="row">
<div class="col-4 menu">
<ul>
<li><b>Tutorials</b></li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div class="col-8">
<h1>Studytonight<span style="font-size: 10px;">.com</span></h1>
<p>n a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
<p><strong>When you resize the browser you will see how the content respond to the resizing.</strong></p>
</div>
</div>
</body>
</html>
Output:
Designing a Mobile-First Layout using Media queries
The term "mobile-first" means designing a layout for mobile phones (small screen devices) first then for other devices (large screen devices). This will make the web page load faster on smaller devices because more than half of the internet traffic comes from small devices. By making these small changes in media queries we can make our web page mobile-first.
In the previous example, what we have done is when the screen width gets smaller than 768px then its layout changes and each column expands itself and starts taking 100% width of the screen while in the mobile-first layout, the layout change when the width gets larger than 768px.
Example: Creating a mobile-first design using media queries
In this example, we have created a mobile-first web layout using CSS media queries.
<!DOCTYPE html>
<html>
<head>
<title>CSS Media Queries</title>
<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: #ff9100;
color: #000000;
padding: 6px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 4px;
margin-bottom: 7px;
background-color: #f5c92a;
color: #000000;
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: #ff9100;
}
[class*="col-"] {
width: 100%;
}
/* 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>Stdytonight</h1>
</div>
<div class="row">
<div class="col-4 menu">
<ul>
<li><b>Tutorials</b></li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div class="col-8">
<h1>Studytonight<span style="font-size: 10px;">.com</span></h1>
<p>n a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
<p><strong>When you resize the browser you will see how the content respond to the resizing.</strong></p>
</div>
</div>
</body>
</html>
Output:
Typical Device Breakpoints in CSS
There is a number of devices and screen with different height and width are available. It is not possible to create an exact breakpoint for each device. To make the web layout responsive and mobile-first, we have divided screen width into 5 groups for different devices.
| Property and Screen size |
Description |
| max-width: 600px; |
This breakpoint is used for the extra small devices having screen width 600px pr less than that. |
| min-width: 600px; |
This breakpoint is used for tablets and large phones having a screen width minimum of 600px and above. |
| min-width: 778px; |
This breakpoint is used for landscape tablets having a screen width minimum of 778px and above. |
| min-width: 992px; |
This breakpoint is used for large devices such as laptops and desktops having a screen width minimum of 992px and above. |
| min: width: 1200px; |
This breakpoint is used for extra-large devices such as laptops and desktops having a screen width minimum of 1200px and above. |
Example: Changing Background color based on device's width in CSS
In this example, we have set the multiple breakpoints for different screen sizes. So, when we resize the browser the background color changes at different breakpoints (screen sizes).
<!DOCTYPE html>
<html>
<head>
<title>CSS Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.breakpoint {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.breakpoint {background: pink;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.breakpoint {background: orange;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.breakpoint {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.breakpoint {background: #f6f799;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.breakpoint {background: purple;}
}
</style>
</head>
<body>
<p class="breakpoint">When you resize the browser you will see how the background color of this paragraph changes on different screen sizes.</p>
</body>
</html>
Output:
Hide elements using Media Queries
The media queries also offer the hide element functionality. We can hide elements or content for a specific screen device. Suppose, there is a list of items that is visible on the large screen devices but we do not want to display it in small screen devices such as mobile phones. So we do this using media queries.
Example: Hiding elements using media queries
In this example, we have created a list that gets hidden when the browser's width is 500px or less than that.
Conclusion
In this lesson, we have learned the concept of media queries, syntax, etc. Also, we have learned the following
- Media types
- min-width and max-width
- How to create columns using media queries
- How to add a breakpoint
- How to design a mobile-first layout
- How to add typical breakpoints
- Hide elements using media queries
