Responsive Web Design – Media Queries
What is a Media Query?
A CSS trick called media query was first presented in CSS3.
It includes a block of CSS properties using the @media rule only when a specific condition is met.
Example
If the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Add a Breakpoint
We created a responsive web page with rows and columns earlier in this lesson, but it didn’t look nice on a small screen.
For such, media inquiries can be useful. To make specific elements of the design act differently on either side of the breakpoint, we can add a breakpoint.
Then, add a breakpoint at 768px using a media query:
Example
When the screen (browser window) gets smaller than 768px, each column should have a width of 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Always Design for Mobile First
Designing for mobile devices should come before designing for desktops or other devices. This will speed up the page’s display on smaller screens.
This implies that our CSS has to be modified in some way.
When the width increases above 768 pixels, we should alter the design rather than updating the styles when the width decreases. As a result, our design will be mobile first:
Then, add a breakpoint at 768px using a media query:
Example
/* For mobile phones: */
[class*="col-"] {
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%;}
}
Another Breakpoint
Breakpoints can be added in any number you choose.
Additionally, a breakpoint between tablets and smartphones will be inserted.
To do this, we provide one additional media query (at 600px) along with a new set of classes for devices that are bigger than 600px but smaller than 768px:
Example
Note that the two sets of classes are almost identical, the only difference is the name (col- and col-s–):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-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%;}
}
Although it may seem strange that we have two sets of the same classes, this allows us to choose in HTML what should happen to the columns at each breakpoint:
HTML Example
For desktop:
There will be three columns in each of the first and third sections. There will be six columns in the center part.
For tablets:
Three columns will make up the first section, nine columns will make up the second, and twelve columns will make up the third section, which will be positioned beneath the first two sections.
<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>
Typical Device Breakpoints
It is challenging to establish a precise breakpoint for every device because there are so many displays and gadgets with varying widths and heights. Five groups could be your focus to keep things simple:
Example
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientation: Portrait / Landscape
Moreover, media queries can be used to modify a page’s layout based on the browser’s orientation.
A “Landscape” orientation refers to a set of CSS characteristics that are only applicable when the browser window is wider than its height.
Example
The web page will have a lightblue background if the orientation is in landscape mode:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Hide Elements With Media Queries
Hiding components on various screen sizes is another typical application for media queries:
Example
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Change Font Size With Media Queries
Media queries can also be used to alter an element’s text size on various screen sizes:
Example
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
