In today's mobile-first era, building a website that looks good on all screen sizes is a must. CSS media queries are the key technology to achieve that. With media queries, you can apply different CSS styles depending on the user's device screen size. This article explains how to use them from scratch with real examples.
What Is a Media Query?
A media query is a CSS rule that lets you apply certain styles only when a specific condition is met, such as a screen width smaller or larger than a certain value. The basic syntax uses the @media keyword.
Basic Media Query Syntax
/* This style only applies if the screen width is at most 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* This style only applies if the screen width is at least 1024px */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}Common Breakpoints Used
A breakpoint is a point where the layout changes. Here are commonly used breakpoints:
- Mobile: max-width 576px
- Tablet: 577px – 768px
- Small laptop: 769px – 1024px
- Desktop: 1025px and up
/* Mobile */
@media (max-width: 576px) { ... }
/* Tablet */
@media (min-width: 577px) and (max-width: 768px) { ... }
/* Laptop */
@media (min-width: 769px) and (max-width: 1024px) { ... }
/* Desktop */
@media (min-width: 1025px) { ... }The Mobile First Approach
The recommended approach is mobile first: write CSS for small screens first, then use min-width for larger screens.
/* Default: for mobile */
.container {
padding: 16px;
font-size: 14px;
}
/* For tablet and up */
@media (min-width: 768px) {
.container {
padding: 32px;
font-size: 16px;
}
}
/* For desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}Practical Example: A Responsive Two-Column Layout
One column on mobile, two columns on desktop:
<div class="wrapper">
<main class="content">
<h1>Main Article</h1>
<p>This is the main content of the page.</p>
</main>
<aside class="sidebar">
<h2>Widget</h2>
<p>This is the sidebar.</p>
</aside>
</div>
<style>
/* Mobile first: one column */
.wrapper {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
/* Desktop: two columns */
@media (min-width: 768px) {
.wrapper {
flex-direction: row;
}
.content {
flex: 2;
}
.sidebar {
flex: 1;
}
}
</style>Example: Hiding an Element on Mobile
<div class="sidebar-desktop">
Only shown on desktop
</div>
<style>
.sidebar-desktop {
display: none;
}
@media (min-width: 1024px) {
.sidebar-desktop {
display: block;
}
}
</style>Example: Responsive Font Size
h1 {
font-size: 1.5rem; /* mobile */
}
@media (min-width: 768px) {
h1 {
font-size: 2rem; /* tablet */
}
}
@media (min-width: 1024px) {
h1 {
font-size: 2.5rem; /* desktop */
}
}Don't Forget the Viewport Meta Tag
For media queries to work correctly on mobile devices, add the viewport meta tag inside your HTML <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without this tag, mobile browsers will render the page as if the screen were as wide as a desktop, and media queries won't work as expected.
Tips for Building a Responsive Website
- Always use relative units like
%,em,reminstead ofpxfor flexible sizing. - Use responsive images with
max-width: 100%so images don't overflow their container. - Test your website at various screen sizes using the browser's DevTools (Ctrl+Shift+M in Chrome).
- Avoid too many breakpoints — 3 breakpoints are often enough for most projects.
Conclusion
Media queries are the foundation of responsive web design. By understanding how @media works, the breakpoint concept, and the mobile-first approach, you can already build a website that looks good on all screen sizes. Apply the examples above to your project and test the results on various devices to ensure an optimal user experience.
