Modern websites are viewed on a wide variety of devices, including smartphones, tablets, laptops, desktop computers, and large displays. Since each device has a different screen size and resolution, a single fixed webpage layout cannot provide the best experience for every user. CSS Media Queries solve this challenge by allowing developers to apply different CSS rules based on the characteristics of the user's device.
A media query is a powerful CSS feature that helps create responsive websites. It enables developers to modify layouts, font sizes, images, spacing, navigation menus, and other design elements according to screen width, height, orientation, or device capabilities. This flexibility ensures that webpages remain attractive, readable, and easy to use across all modern devices.
Media Queries are a key component of Responsive Web Design. They work together with flexible layouts, CSS Flexbox, CSS Grid, and responsive images to build websites that automatically adapt to changing screen sizes without requiring separate mobile and desktop versions.
In this tutorial, you will learn the fundamentals of CSS Media Queries, understand their syntax, explore common media features, and create responsive webpages using practical examples.
CSS Media Queries are conditional rules that allow different CSS styles to be applied based on specific conditions such as screen width, screen height, orientation, or device type. Instead of using one design for every device, media queries enable a webpage to respond intelligently to different viewing environments.
For example, a webpage may display three columns on a desktop computer, two columns on a tablet, and a single column on a smartphone. This adjustment happens automatically through CSS without changing the HTML structure.
Media Queries make websites more flexible, accessible, and user-friendly while maintaining a consistent appearance across different devices.
Without Media Queries, a webpage designed for a desktop monitor may appear too wide or difficult to read on smaller devices. Media Queries allow developers to create layouts that adapt naturally to available screen space, improving both usability and readability.
Responsive websites built with Media Queries provide a better browsing experience, reduce unnecessary scrolling, and help users access information more comfortably on any device.
Media Queries begin with the @media rule followed by one or more conditions. If the specified condition is true, the CSS rules inside the media query are applied automatically.
@media (condition){
CSS Rules
}
@media (max-width:768px){
body{
background:#f5f5f5;
}
}
In this example, the webpage background changes when the browser width becomes 768 pixels or smaller.
CSS supports different media types that determine where styles should be applied. Although most modern responsive websites primarily use the screen media type, other types are also available for specific situations.
| Media Type | Description |
|---|---|
| all | Applies styles to all media devices. |
| screen | Applies styles to computer screens, tablets, and mobile devices. |
| Applies styles when printing a webpage. | |
| speech | Used for screen readers and speech synthesizers. |
Media Queries use media features to evaluate the characteristics of a device or browser window. These features determine when specific CSS rules should be applied.
| Media Feature | Purpose |
|---|---|
| max-width | Applies styles up to a specified width. |
| min-width | Applies styles above a specified width. |
| max-height | Applies styles up to a specified height. |
| min-height | Applies styles above a specified height. |
| orientation | Detects portrait or landscape mode. |
The following example demonstrates how a webpage layout changes automatically when viewed on a smaller screen.
<div class="container"> Responsive Content </div>
.container{
width:80%;
margin:auto;
padding:20px;
background:#0d6efd;
color:white;
}
@media (max-width:768px){
.container{
width:95%;
background:#198754;
}
}
On larger screens, the container occupies 80% of the browser width. When the screen width becomes 768 pixels or smaller, the container expands to 95% of the available width and changes its background color. This simple example demonstrates how Media Queries help create responsive webpage layouts.
Media Queries are one of the core technologies behind Responsive Web Design. They allow developers to apply different styles for different screen sizes while keeping the HTML structure unchanged.
When combined with flexible layouts, CSS Flexbox, CSS Grid, and responsive images, Media Queries enable websites to provide an excellent viewing experience across smartphones, tablets, laptops, and desktop computers.
| Responsive Feature | Role of Media Queries |
|---|---|
| Layout | Changes columns and page structure. |
| Typography | Adjusts font sizes for readability. |
| Images | Controls image sizing. |
| Navigation | Creates mobile-friendly menus. |
| Spacing | Optimizes margins and padding. |
Breakpoints are predefined screen widths where a webpage layout changes to provide a better viewing experience. Instead of using one layout for every device, developers define breakpoints that apply different CSS rules based on the browser width.
Breakpoints make websites flexible and help maintain readability across smartphones, tablets, laptops, and desktop computers.
| Device | Typical Screen Width |
|---|---|
| Mobile Phones | Up to 576px |
| Tablets | 577px – 768px |
| Small Laptops | 769px – 992px |
| Desktop Computers | 993px and above |
These values are only common reference points. Developers should choose breakpoints according to their website layout rather than targeting specific devices.
The min-width media feature applies CSS rules when the browser width is greater than or equal to a specified value. It is commonly used in mobile-first development.
@media (min-width:768px){
CSS Rules
}
.card{
width:100%;
}
@media (min-width:768px){
.card{
width:48%;
}
}
In this example, cards occupy the full width on smaller screens. When the screen width reaches 768 pixels or more, two cards fit side by side.
The max-width media feature applies CSS rules when the browser width becomes smaller than or equal to a specified value. It is frequently used to optimize layouts for tablets and mobile devices.
@media (max-width:600px){
h1{
font-size:28px;
}
}
The heading size automatically becomes smaller on narrow screens, improving readability without affecting larger displays.
Mobile-first development begins by designing webpages for small screens and then progressively enhancing the layout for larger devices using min-width media queries.
This approach focuses on performance, simplicity, and accessibility while ensuring that mobile users receive an optimized experience.
.container{
width:100%;
}
@media (min-width:992px){
.container{
width:85%;
margin:auto;
}
}
The container occupies the full width on smaller devices and becomes narrower on larger screens for improved readability.
Desktop-first development starts with styles for larger screens and gradually adjusts the layout for smaller devices using max-width media queries.
Although still used in some projects, many developers now prefer the mobile-first approach because of increasing mobile internet usage.
.sidebar{
width:300px;
}
@media (max-width:768px){
.sidebar{
width:100%;
}
}
The sidebar occupies a fixed width on desktop computers and automatically expands to the full width on smaller screens.
Media Queries are commonly used to create navigation menus that automatically adjust according to the screen size.
.menu{
display:flex;
gap:20px;
}
@media (max-width:768px){
.menu{
flex-direction:column;
}
}
The navigation links appear horizontally on larger screens and vertically on mobile devices, making navigation easier for touch-based users.
Media Queries work perfectly with CSS Grid layouts. Grid columns can automatically change according to the available screen width.
.grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
}
@media (max-width:768px){
.grid{
grid-template-columns:1fr;
}
}
The layout displays three columns on larger screens and changes to a single-column layout on smaller devices.
Text should remain readable on every device. Media Queries allow developers to adjust font sizes for different screen widths without changing the HTML structure.
h1{
font-size:48px;
}
@media (max-width:768px){
h1{
font-size:32px;
}
}
The heading becomes smaller on tablets and smartphones, providing a more comfortable reading experience.
The following example combines Flexbox and Media Queries to build a responsive course card layout.
HTMLCSSJavaScript
.courses{
display:flex;
gap:20px;
}
.course{
flex:1;
padding:20px;
background:#f4f4f4;
border-radius:8px;
text-align:center;
}
@media (max-width:768px){
.courses{
flex-direction:column;
}
}
The cards appear in a horizontal row on larger screens and automatically stack vertically on mobile devices, creating a clean and user-friendly responsive layout.
Besides screen width, CSS Media Queries can also detect the orientation of a device. Orientation refers to whether the screen is displayed vertically (portrait) or horizontally (landscape). This feature helps developers optimize webpage layouts for different viewing modes.
Portrait mode is commonly used on smartphones where the height of the screen is greater than its width.
@media (orientation:portrait){
body{
background:#f8f9fa;
}
}
Landscape mode is frequently used on tablets, laptops, and desktop computers where the screen width is greater than its height.
@media (orientation:landscape){
body{
background:#ffffff;
}
}
Orientation media queries help improve the user experience by adapting layouts based on how users hold their devices.
Sometimes webpages need a different appearance when printed. CSS Media Queries allow developers to customize styles specifically for printing by using the print media type.
@media print{
nav,
footer{
display:none;
}
body{
color:black;
background:white;
}
}
In this example, the navigation bar and footer are hidden while printing, resulting in a cleaner printed document.
Modern operating systems allow users to switch between light mode and dark mode. CSS Media Queries can detect the user's preferred color scheme and automatically apply an appropriate design.
@media (prefers-color-scheme:dark){
body{
background:#1e1e1e;
color:white;
}
}
This feature improves accessibility and provides a more comfortable viewing experience in low-light environments.
Well-organized Media Queries contribute to efficient and maintainable CSS. Although Media Queries themselves are lightweight, poorly structured responsive code can make stylesheets difficult to manage.
| CSS Media Queries | Responsive Web Design |
|---|---|
| A CSS feature used to apply conditional styles. | A complete web design approach. |
| Changes styles based on screen conditions. | Combines layouts, images, typography, and Media Queries. |
| Part of responsive development. | Overall strategy for adaptive websites. |
| Uses the @media rule. | Uses Flexbox, Grid, Media Queries, and responsive units. |
A CSS Media Query is a conditional rule that applies CSS styles when specific device or screen conditions are met.
Media Queries are used to create responsive websites that adapt their layout, typography, spacing, and navigation for different screen sizes.
min-width applies styles above a specified width, while max-width applies styles below a specified width.
The @media rule is used to define a Media Query.
Yes. Media Queries can detect portrait and landscape orientations using the orientation media feature.
| Concept | Description |
|---|---|
| @media | Defines conditional CSS rules. |
| min-width | Applies styles above a specified width. |
| max-width | Applies styles below a specified width. |
| Breakpoints | Screen widths where layouts change. |
| Orientation | Detects portrait or landscape mode. |
| Print Media | Applies styles for printed pages. |
| Dark Mode | Supports users who prefer dark color schemes. |
CSS Media Queries are one of the most important features of modern web development. They enable developers to create flexible, responsive, and user-friendly websites that automatically adapt to different devices and screen sizes. By combining Media Queries with Flexbox, CSS Grid, relative units, and responsive images, developers can build professional websites that deliver an excellent user experience on smartphones, tablets, laptops, and desktop computers.
Mastering CSS Media Queries is an essential step toward becoming a skilled front-end developer. Understanding how to use breakpoints, orientation detection, print styles, and modern responsive techniques will help you design websites that remain attractive, accessible, and maintainable for years to come.