Adapting Design: Implementing Media Queries in CSS
Create fluid and adaptive layouts that look perfect on any device, from mobile phones to widescreen desktops, using the power of @media rules.
Welcome! Today we'll learn how to make our websites look great on any device using Media Queries.
/* Our layout is ready! */Basic Syntax of @media
A media query is an @media rule that contains a block of CSS properties. These properties only apply if a certain condition, based on a media type or feature, is true. For example: @media (max-width: 600px) { ... } applies styles only on screens 600px or narrower.
Understanding Breakpoints
Breakpoints are the points where your site's content responds to provide the user with the best possible layout. Common breakpoints are based on device widths: for example, less than 768px for mobiles, 768px-1024px for tablets, and over 1024px for desktops.
Using Logical Operators
You can create more complex queries using logical operators like and, not, and only. For instance, @media (min-width: 768px) and (max-width: 1024px) targets a specific range of screens, perfect for tablet-specific styles.
Mobile-First Design
Mobile-first is a strategy where you design for the smallest screen first and then add styles for larger screens using min-width media queries. This approach often leads to cleaner code and better performance on mobile devices, which are typically more resource-constrained.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
/* Mobile styles */ body { font-size: 16px; } /* Tablet styles */ { body { font-size: 18px; } } /* Desktop styles */ { body { font-size: 20px; } }
Practice Example: Code Editor
Write a media query that changes the background color of the box to lightblue on screens with a minimum width of 768px.
Using Media Queries in CSS
| Property | Description |
|---|---|
| @media (max-width: 600px) | Applies styles for small screens. |
| @media (min-width: 601px) and (max-width: 1200px) | Applies styles for medium screens. |
| @media (min-width: 1201px) | Applies styles for large screens. |
* Write your CSS code and apply it to see the results.
Results:
A Practical Guide to Responsive Design
Responsive design is no longer optional. It's essential for reaching users on the vast array of devices available today. Media queries are your primary tool for this task.
1. Mobile-First vs. Desktop-First
With Mobile-First, you write your base styles for mobile and use min-width to add complexity for larger screens. Desktop-First is the opposite, using max-width to simplify the design for smaller screens. Mobile-first is often preferred for performance.
/* Mobile-First Approach */
.container { width: 100%; }
@media (min-width: 800px) {
.container { width: 80%; }
}2. Beyond Width: Targeting Orientation & Resolution
Media queries can target more than just width. You can adapt layouts for portrait vs. landscape orientation or target high-resolution (Retina) screens using min-resolution.
/* Different padding for landscape */
@media (orientation: landscape) {
.card { padding: 40px; }
}3. Hiding and Showing Elements
A common responsive technique is to selectively hide or show elements based on screen size. For example, a full navigation bar on desktop might become a hamburger menu icon on mobile.
.desktop-nav { display: none; }
@media (min-width: 768px) {
.desktop-nav { display: block; }
.mobile-nav { display: none; }
}Practical Takeaway: Don't just think in terms of device breakpoints. Think about where your content and layout naturally break, and set your media query breakpoints there. Fluid grids and flexible images are your best friends.