When it comes to designing a website that looks great on all devices, responsive design is key. CSS 3’s media queries are an essential tool to achieve this. Media queries allow you to apply different styles to a webpage based on the device’s screen size, resolution, and other factors. In this step-by-step tutorial, we’ll break down the basics of media queries, show you how to use them with examples and guide you through building responsive layouts.
1. What are Media Queries?
Media queries are a feature of CSS that enables developers to apply specific styles to a webpage depending on the properties of the device’s screen. For example, you can use media queries to apply different styles for a mobile phone versus a desktop computer.
Syntax:
2. The Viewport Meta Tag
Before diving into media queries, it’s important to add the viewport meta tag in the <head> section of your HTML document. This tag controls the page’s dimensions and scaling on mobile devices, ensuring proper display across all screen sizes.
Syntax for the viewport meta tag:
width=device-width: Sets the page’s width to match the device’s screen width.initial-scale=1: Ensures the page is displayed at a 1x zoom level on page load.
Example:
3. Common Media Query Conditions
Here are the most common conditions you’ll use in your media queries:
- max-width: Targets devices with a maximum width.
- min-width: Targets devices with a minimum width.
- max-height: Targets devices with a maximum height.
- min-height: Targets devices with a minimum height.
- orientation: Targets devices in portrait or landscape mode.
Example:
This rule applies when the screen width is 768px or less.
4. Combining Multiple Conditions
You can combine multiple conditions in a single media query using and, or, or not. This allows you to target more specific devices or screen configurations.
@media (min-width: 600px) and (max-width: 900px) {
.container {
width: 80%;
}
}
This will apply the styles only when the screen width is between 600px and 900px.
Example media query in different devices background change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Background Color</title>
<style>
/* Default Background Color (for large screens like TV) */
body {
background-color: lightblue;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: white;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 2rem;
}
/* Background Color for Mobile Devices */
@media (max-width: 600px) {
body {
background-color: lightcoral;
}
}
/* Background Color for Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
body {
background-color: lightgreen;
}
}
/* Background Color for Laptops */
@media (min-width: 1025px) and (max-width: 1920px) {
body {
background-color: lightyellow;
}
}
/* Background Color for TV (Large Screens) */
@media (min-width: 1921px) {
body {
background-color: lightgray;
}
}
</style>
</head>
<body>
<h1>Responsive Background Color Example</h1>
</body>
</html>
5. Example: Responsive Web Design
Let’s create a simple responsive layout using media queries.
CSS:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Web Design Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Responsive Web Design</h1>
</header>
<div class="container">
<h2>Welcome to the Responsive Layout</h2>
<p>This layout adjusts based on the screen size, ensuring the design looks great on all devices.</p>
</div>
<footer>
<p>Footer Content © 2025</p>
</footer>
</body>
</html>
One more Example
HTML:
CSS (styles.css):
How It Works:
- General Layout: The layout is a simple 3-column design with a header and footer.
- Responsive Behavior: Using media queries, the layout adjusts for different screen sizes:
- Mobile/Tablet Portrait: All three columns stack on top of each other.
- Tablet Landscape: The columns adjust to 48% width, showing two columns side by side.
- Desktop: The columns are set to 30% width, with three columns evenly spaced.
- TV: For large screens (like TVs), the columns are set to 22% width, allowing more content to be displayed.
6. Best Practices for Media Queries
- Mobile-first approach: Always start designing for mobile screens first, then use media queries to adjust the layout for larger screens. This ensures that your website works well on smartphones, the most common device.
- Use relative units: Instead of using fixed pixel values, use relative units like
emorremto make your design more flexible. - Test on real devices: Always check how your design looks on real devices to make sure the media queries work properly.
Summary
Media queries are a powerful feature of CSS 3 that enables you to create responsive web designs that adjust according to different screen sizes and devices. By using media queries and the viewport meta tag, you can ensure that your website looks great on desktops, tablets, and mobile devices. Don’t forget to test your designs on different devices to ensure they function as expected!