CSS Media Queries
What are CSS Media Queries?
CSS Media Queries allow you to apply different CSS styles based on the screen size, screen orientation, or device type. They are an essential part of Responsive Web Design, enabling webpages to look good on desktops, tablets, laptops, and smartphones without changing the HTML code.
Why Use CSS Media Queries?
Different devices have different screen sizes. A webpage that looks perfect on a desktop may not display correctly on a mobile phone. Media queries allow you to customize layouts, font sizes, images, navigation menus, and other elements for different screen widths.
Common Media Query Breakpoints
Basic Media Query Syntax
A media query starts with the @media rule followed by a condition. The CSS inside the block runs only when the condition is true.
@media (max-width:768px){
body{
background:lightblue;
}
}Step 1: Change the Background Color
This example changes the background color when the browser width becomes 768 pixels or smaller.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:white;
text-align:center;
font-family:Arial;
}
@media (max-width:768px){
body{
background:lightblue;
}
}
</style>
</head>
<body>
<h2>
Resize the browser window
</h2>
</body>
</html>Step 2: Change Font Size
Media queries can adjust text size for smaller screens to improve readability.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-size:40px;
}
@media (max-width:768px){
h1{
font-size:24px;
}
}
</style>
</head>
<body>
<h1>
Responsive Heading
</h1>
</body>
</html>Step 3: Create a Responsive Navigation
Stack menu items vertically on smaller screens.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
display:flex;
gap:10px;
}
nav a{
padding:10px;
background:#007BFF;
color:white;
text-decoration:none;
}
@media (max-width:768px){
nav{
flex-direction:column;
}
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>Step 4: Create a Responsive Flexbox Layout
Use media queries to stack columns vertically on small screens.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display:flex;
gap:10px;
}
.box{
flex:1;
background:#00a8ff;
padding:40px;
color:white;
text-align:center;
}
@media (max-width:768px){
.container{
flex-direction:column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
</body>
</html>Step 5: Complete Responsive Webpage
This example combines responsive typography, navigation, and layout into one webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin:0;
font-family:Arial;
}
header{
background:#007BFF;
color:white;
padding:20px;
text-align:center;
}
.container{
display:flex;
}
.box{
flex:1;
padding:40px;
text-align:center;
background:#f4f4f4;
border:1px solid #ddd;
}
@media (max-width:768px){
.container{
flex-direction:column;
}
header{
font-size:20px;
}
}
</style>
</head>
<body>
<header>
Responsive Website
</header>
<div class="container">
<div class="box">Content 1</div>
<div class="box">Content 2</div>
</div>
</body>
</html>Advantages of CSS Media Queries
Best Practices
- Use the viewport meta tag for responsive webpages.
- Design for mobile devices first whenever possible.
- Use flexible widths instead of fixed pixel widths.
- Choose logical breakpoints based on your layout.
- Test your website on desktop, tablet, and mobile devices.
- Use Flexbox and CSS Grid with media queries.
- Keep media query rules organized and easy to maintain.
- Avoid creating unnecessary breakpoints.
Web Resources on CSS Media Queries
1. MDN Web Docs : Using media queries
2. Web.dev : Media queries
3. CSS Tricks.com : CSS Media Queries Guide
4. Dev.to : Using CSS Media Queries
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.