Master media query syntax with @media rules for responsive breakpoints
Understand mobile-first vs desktop-first responsive design strategies
Use logical operators (and, or, not) to create complex queries
Apply modern Level 4 range syntax for more readable media queries
Implement common breakpoint patterns used in production frameworks
Optimize layouts for different devices and orientations
Handle advanced media features like resolution, hover, and pointer
Introduction to Media Queries
Media queries are the foundation of responsive web design, allowing you to apply different styles based on device characteristics like screen width, height, orientation, and resolution. Introduced with CSS3, media queries enable a single HTML document to adapt its presentation for phones, tablets, desktops, and even print.
While modern CSS offers fluid design techniques with clamp() and viewport units, media queries remain essential for major layout changes, component variations, and handling device-specific features. Understanding when to use media queries versus fluid design is key to creating robust responsive experiences.
Basic Media Query Syntax
A media query consists of a media type (optional) and one or more media features that test for specific conditions. When all conditions are true, the styles within the media query block are applied.
/* Basic syntax */
@media media-type and (media-feature) {
/* Styles applied when condition is true */
}
/* Most common: screen width */
@media screen and (min-width: 768px) {
.container {
max-width: 1200px;
}
}
/* Multiple conditions with 'and' */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.sidebar {
display: block;
}
}
Common Breakpoint Patterns
Industry-standard breakpoints are based on common device sizes. These breakpoints have evolved from actual device widths and are widely used across major CSS frameworks like Bootstrap, Tailwind, and Material Design.
Mobile-first design starts with styles for the smallest screens and progressively enhances for larger displays using min-width queries. This approach is recommended because it naturally creates a performance benefit for mobile users and ensures your design works on constrained devices.
Desktop-first design starts with styles for large screens and uses max-width queries to adapt for smaller devices. While less common today, this approach can be appropriate for applications primarily used on desktop or when retrofitting existing desktop-only designs.
CSS Media Queries Level 4 introduces a more intuitive range syntax using comparison operators. This makes queries more readable and easier to understand at a glance.
/* Old syntax */
@media (min-width: 768px) and (max-width: 1024px) {
.element { /* styles */ }
}
/* New Level 4 syntax - More readable! */
@media (768px <= width <= 1024px) {
.element { /* styles */ }
}
/* Greater than or equal */
@media (width >= 768px) {
.element { /* styles */ }
}
/* Less than or equal */
@media (width <= 768px) {
.element { /* styles */ }
}
/* Greater than (exclusive) */
@media (width > 767px) {
.element { /* styles */ }
}
/* Less than (exclusive) */
@media (width < 768px) {
.element { /* styles */ }
}
Logical Operators: and, or, not
Media queries support logical operators to create complex conditions. You can combine multiple features with and, provide alternatives with or (comma), and negate conditions with not.
/* AND: All conditions must be true */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.element {
/* Applies only between 768px and 1024px */
}
}
/* Multiple AND conditions */
@media (min-width: 768px) and (orientation: landscape) and (hover: hover) {
.element {
/* Large screen, landscape, with hover capability */
}
}
/* OR: Any condition can be true (comma-separated) */
@media (max-width: 640px), (orientation: portrait) {
.mobile-menu {
/* Applies if narrow OR portrait */
}
}
/* NOT: Negates the entire query */
@media not all and (min-width: 768px) {
.element {
/* Applies when NOT at least 768px wide */
/* Same as (max-width: 767px) */
}
}
/* NOT with specific features */
@media not (hover: hover) {
.button {
/* No hover capability (touch devices) */
padding: 1rem; /* Bigger touch targets */
}
}
Orientation and Aspect Ratio
Beyond width, you can query device orientation and aspect ratio to create designs that adapt to how users hold their devices or the shape of their screens.
Modern media queries support many advanced features for fine-grained control over responsive design, especially for handling different input methods and display capabilities.