A media query, introduced in CSS3, employs the @media rule to incorporate a set of CSS properties exclusively if a specific condition is met.
Example
When the browser window is 600 pixels or less in width, the background color will appear as light blue
|
@media only screen and (max-width: 600px) { |
In a previous section of this tutorial, we crafted a web page featuring rows and columns, ensuring responsiveness. However, its appearance fell short on smaller screens.
This is where media queries come into play. By introducing breakpoints, we can specify how different aspects of the design should adapt on either side of the breakpoint.
Apply a media query to establish a breakpoint at 768 pixels.
Example
As the screen (browser window) size decreases to less than 768 pixels, each column should occupy the entire width, set to 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%; } } |
Mobile First entails prioritizing design considerations for mobile devices ahead of desktop or other devices, thereby optimizing page performance on smaller screens.
To achieve this, adjustments are required in our CSS approach. Rather than altering styles when the width decreases below 768 pixels, we should modify the design when the width surpasses 768 pixels. This approach aligns with Mobile First principles.
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%;} } |
Feel free to incorporate as many breakpoints as needed.
Additionally, we’ll introduce a breakpoint specifically tailored for devices between tablet and mobile phone sizes.
To accomplish this, we introduce an additional media query at 600 pixels, along with a new set of classes designed for devices larger than 600 pixels but smaller than 768 pixels.
Example
It’s important to note that the two sets of classes are nearly identical, differing only in their names (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%;} } |
While it may appear unconventional to have two sets of identical classes, this approach provides flexibility in HTML, enabling us to determine the behavior of columns at each breakpoint.
|
HTML Example: For desktop:
For tablets:
|
|
<div class=”row”> |
Given the vast array of screens and devices with varying heights and widths, pinpointing precise breakpoints for each device can be challenging. To streamline this process, you may consider targeting five primary groups.
Example
|
/* Extra small devices (phones, 600px and down) */ |
Media queries can also alter the layout of a page based on the orientation of the browser.
Specific CSS properties can be designated to apply solely when the browser window is wider than its height, commonly referred to as “landscape” orientation.
Example
If the orientation is in landscape mode, the webpage background will be light blue.
| @media only screen and (orientation: landscape) { body { background-color: lightblue; } } |
Another prevalent application of media queries involves concealing elements on various screen sizes.
Example
| /* If the screen size is 600px wide or less, hide the element */ @media only screen and (max-width: 600px) { div.example { display: none; } } |
Media queries can also adjust the font size of an element based on different screen sizes.
Example
|
/* If the screen size is 601px or more, set the font-size of <div> to 80px */ |
