Media Queries for Responsive Design
Learning Objectives
- Master the concepts in this lesson
- Apply knowledge through practice
- Build practical skills
- Prepare for next topics
What Are Media Queries?
Media queries are the backbone of responsive web design. They allow you to apply different CSS styles based on various device characteristics, most commonly the viewport width. Think of media queries as the "if statements" of CSS—they let you create conditional styles that activate only when certain conditions are met.
Imagine you're a chameleon crossing different colored surfaces—you need to change your appearance based on your environment. Media queries give your website this adaptability, automatically adjusting its appearance to match the viewing environment.
graph TD
A[CSS Rules] --> B{Media Query}
B -->|"Screen width < 768px"| C[Mobile Styles]
B -->|"Screen width >= 768px and < 1024px"| D[Tablet Styles]
B -->|"Screen width >= 1024px"| E[Desktop Styles]
style A fill:#f9f,stroke:#333,stroke-width:2px
style B fill:#bbf,stroke:#333,stroke-width:1px
style C fill:#dfd,stroke:#333,stroke-width:1px
style D fill:#fdd,stroke:#333,stroke-width:1px
style E fill:#ddf,stroke:#333,stroke-width:1px
A Brief History of Media Queries
To fully appreciate media queries, we should understand their origins:
CSS2 and Media Types (1998)
CSS2 introduced the concept of "media types" with the @media rule, allowing you to target different types of media like screen, print, handheld, etc. This was the first step toward responsive design, but it lacked the ability to target specific characteristics of each device.
/* CSS for screens */
@media screen {
body { font-size: 14px; }
}
/* CSS for print */
@media print {
body { font-size: 12pt; }
}Media Queries in CSS3 (2009)
CSS3 expanded the @media rule to include "media features" like width, height, orientation, and resolution. This was a game-changer, allowing developers to create truly responsive designs.
Responsive Web Design (2010)
Ethan Marcotte's landmark article "Responsive Web Design" popularized the use of media queries as a key component of responsive design, alongside fluid grids and flexible images.
Level 4 Media Queries (Present)
Media Queries Level 4 introduced new features like hover, pointer, and prefers-color-scheme, extending responsive design beyond just screen size to include user preferences and input methods.
Media Query Syntax
Media queries have a specific syntax that allows you to target devices based on their characteristics:
@media [media-type] ([media-feature]) {
/* CSS rules to apply when conditions match */
}Media Types
Media types specify the broad category of device. The most common ones are:
all: Matches all devices (default if not specified)screen: Computer screens, tablets, phonesprint: Print preview mode and printed pagesspeech: Screen readers
/* Styles for print only */
@media print {
nav, footer {
display: none; /* Hide navigation and footer when printing */
}
body {
font-size: 12pt; /* Use points for print */
color: black;
}
a::after {
content: " (" attr(href) ")"; /* Show URLs after links when printing */
}
}Media Features
Media features describe specific characteristics of the user agent or display device. The most commonly used ones for responsive design are:
width / min-width / max-width
The viewport width. Most frequently used for responsive breakpoints.
@media (min-width: 768px) { /* Styles for screens 768px and wider */ }
@media (max-width: 767px) { /* Styles for screens narrower than 768px */ }
@media (width: 1024px) { /* Styles for screens exactly 1024px wide */ }height / min-height / max-height
The viewport height.
@media (min-height: 600px) { /* Tall viewports */ }orientation
Whether the device is in portrait or landscape mode.
@media (orientation: portrait) { /* Device is taller than it is wide */ }
@media (orientation: landscape) { /* Device is wider than it is tall */ }aspect-ratio
The ratio of width to height of the viewport.
@media (aspect-ratio: 16/9) { /* Exactly 16:9 aspect ratio */ }
@media (min-aspect-ratio: 1/1) { /* Wider than tall */ }resolution
The pixel density of the device.
@media (min-resolution: 2dppx) { /* High-DPI screens like Retina displays */ }prefers-color-scheme (Level 5)
User's preference for light or dark color themes.
@media (prefers-color-scheme: dark) { /* Dark mode styles */ }
@media (prefers-color-scheme: light) { /* Light mode styles */ }prefers-reduced-motion (Level 5)
User's preference for reduced motion (accessibility feature).
@media (prefers-reduced-motion: reduce) {
/* Styles with reduced or no animations */
}hover
Whether the user's primary input mechanism can hover.
@media (hover: hover) { /* Styles for devices with hover capability */ }
@media (hover: none) { /* Styles for touch-only devices */ }Combining Media Queries with Logical Operators
Media queries can be combined using logical operators to create more complex conditions:
AND Operator
Use the and keyword to combine multiple conditions (all must be true):
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* Styles for tablets only (between 768px and 1023px) */
}OR Operator
Use a comma to create an OR relationship (at least one must be true):
@media (max-width: 600px), (orientation: portrait) {
/* Styles for either small screens OR devices in portrait orientation */
}NOT Operator
Use not to negate a media query:
@media not screen {
/* Styles for anything that's not a screen (print, speech, etc.) */
}ONLY Operator
Use only to prevent older browsers from applying styles (rarely needed today):
@media only screen and (min-width: 768px) {
/* Styles that should only apply to screens, not to older browsers
that might misinterpret the query */
}
graph TD
A[Media Query] --> B{Does it match?}
B -->|"Yes"| C[Apply Styles]
B -->|"No"| D[Ignore Styles]
subgraph "Logical Operators"
E[AND] --> F["Both conditions must be true"]
G[OR] --> H["Either condition can be true"]
I[NOT] --> J["Negates a condition"]
end