What is a Media Query?
Media query is a CSS technique introduced in CSS3. It is based on the @media.
This rule says to include a block of CSS properties only if a certain
condition is true.
Here is an example:
@media only screen and (max-width: 480px) {
table {
width: 100%;
}
}Always Design for Mobile First
The percent of internet traffic for mobile devices grew from 16.2% in 2013 to 53.3% in 2019. 1020 In addition, it is projected that about three quarters of internet users will access the web solely via their smartphones by 2025, according to a 2019 report published by the World Advertising Research Center (WARC) 30.
Furthermore, mobile first means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
Use both max-width and max-device-width rules
max-width is the width of the target display area
max-device-width is the width of the device’s entire rendering area
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
}The @media rule comes after the normal CSS
This won’t work:
@media screen and (min-width: 500px) {
.primary-button {
background-color: #128ff2;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
color: #fff;
display: inline-block;
}
}
.primary-button {
background-color: #128ff2;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
color: #fff;
display: block;
min-width: 100px;
}This is the way to do it:
.primary-button {
background-color: #128ff2;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
color: #fff;
display: block;
min-width: 100px;
}
@media screen and (min-width: 500px) {
.primary-button {
background-color: #128ff2;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
color: #fff;
display: inline-block;
}
}Add the viewport meta tag to the head of the respective html document
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without the above, @media is a no-op.