Nowadays, the majority of internet users browse websites on their mobile phones or smartphones. As technology is evolving, more and more devices are making their way into the technology market, be it tablets, foldable smartphones, smart watches, etc. Therefore designing web pages that adapt themselves seamlessly to different viewports has become necessary now.
As per the Statisa, over 1.05 billion people uses the internet in India, and this number is going to increase to 1.20 billion by 2050. These huge numbers show how much important it is to build a web page that is responsive enough.
A good well-designed responsive web page makes sure that the user has an optimal view experience and a uniform user experience irrespective of the device the user is using. Responsiveness not only enhances the user experience but also plays a major role in the SEO ranking of the website.
And when it comes to adding responsiveness, the first thing that comes in mind is the media queries. In this blog, we will go through what are media queries, and how you can use them to make your web page responsive.
So, let’s get started.
What are Media Queries?
Media queries are a CSS technique that enables developers to define styling for different viewports, optimizing the layout and design across various devices. In essence, media queries allow the application of CSS rules based on the characteristics of the device or browser window the user is working with.
By leveraging the width, orientation, and other features of the viewport, media queries ensure that the specified styles are dynamically applied, allowing the webpage to adapt seamlessly to a range of screen sizes. This results in a consistent and optimized user experience, regardless of the device.
To effectively use media queries, you must specify the target viewport characteristics, such as width, and then define the corresponding styles. Here's an example:
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
In this example, we have specified the width of the viewport as 768px in the @media query. Furthermore, we have set the background-color property of the body element to lightgray. Therefore, when the width of the viewport is equal to or less than 768px, the background color of the body will change to lightgray.
How Media Query works?
As we have discussed earlier in the blog, Media queries demand two things - the width of the viewport and CSS styling, to show its magic. Let’s break this example:
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
Here,
- @media - a defined keyword used to initiate media query
- max-width - property of media query to define width of viewport
- body - element whose styling you want to target
- background-color - styling you want to change in that viewport
Here’s another example:
@media (max-width: 1024px) {
div {
width: 200px;
font-size: 20px;
color: black;
border: none;
}
}
In this example, we are targeting a div element and changing it’s multiple styling properties under the viewport of width 1024 px.
Along with the max-width property, media queries also use the min-width property. As their names suggest, they work in opposite ways. The min-width property in a media query is used to apply CSS styles when the width of the viewport is equal to or greater than the specified width.
Here’s an example:
@media (min-width: 720px) {
div {
width: 200px;
font-size: 20px;
}
span{
height: 30px;
color: blue;
}
}
Media queries also give us the flexibility to use a combination of both min-width and max-width to target a specific viewport width range. Let’s see an example of it
@media screen and (min-width: 600px) and (max-width: 1200px) {
body {
background-color: lightblue;
}
}
In this example, we are using a combination of both max-width and min-width to target a viewport width ranging from 600px to 1200px.
Each type of device, such as smartphones, tablets, desktops, and even larger monitors, has a specific viewport width. We can use these viewport widths (breakpoints) to style our web components accordingly.
Checkout this table for the breakpoints:
| BREAKPOINT | KEYWORD | DIMENSION |
|---|---|---|
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Until now, we've used pixel units to define width, but media queries also support other length units such as vw, vh, percentages, em, rem, and calc().
Best Practices for Using Media Queries
Mobile-First Approach: Start with the styles for the smallest screens first, then add media queries for larger screens. This approach often results in cleaner and more efficient CSS.
Limit Breakpoints: Use a limited number of breakpoints to keep your styles manageable. Focus on the most common device sizes instead of trying to cover every possible device.
Use Relative Units: Whenever possible, use relative units like percentages, em, or rem instead of fixed units like pixels. This can improve accessibility and responsiveness.
Group Media Queries: Keep all media queries at the end of your CSS file or group them together for better readability. This way, it’s easier to see how styles change across different viewports.
Test on Real Devices: Always test your responsive design on actual devices or using device emulators to ensure that your media queries work as expected.
Avoid Overlapping Queries: Be careful when defining overlapping media queries, as they can lead to unexpected results. Ensure that each query has a distinct range.
Conclusion
Responsive web design is essential in today's multi-device world, and media queries help ensure your site adapts seamlessly to various screen sizes. By using them effectively, you can enhance both user experience and SEO performance. Prioritize responsiveness to future-proof your site and ensure it looks great across all devices.
Also, make sure to checkout Dualite to convert your complex Figma designs into code in a few seconds.
Top comments (1)
Good one.