CSS Media Queries
Master responsive design with CSS media queries and create websites that work beautifully on any device
What are CSS Media Queries?
CSS media queries are a powerful feature that allows you to apply different styles based on various device characteristics like screen size, resolution, orientation, and user preferences. They are the foundation of responsive web design.
With media queries, you can create websites that adapt seamlessly to smartphones, tablets, desktops, and even print media, providing an optimal experience regardless of how users access your content.
What Media Queries Can Detect:
- Screen width and height (breakpoints)
- Device orientation (portrait vs landscape)
- Display resolution and pixel density
- Color capabilities and preferences
- User preferences (reduced motion, contrast)
- Input mechanisms (touch vs mouse)
- Media types (screen, print, speech)
Why Media Queries Matter:
- Create truly responsive layouts that work on any device
- Improve user experience with device-appropriate designs
- Enhance accessibility with user preference detection
- Optimize content for different contexts (print, screen)
- Future-proof your websites for new devices and form factors
Media Query Syntax
Media queries use the @media rule to conditionally apply CSS styles. The basic syntax allows you to test for various device characteristics and apply styles when conditions are met.
/* Basic media query syntax */
@media media-type and (condition) {
/* CSS rules here */
}
/* Example: Styles for tablets and up */
@media screen and (min-width: 768px) {
.container {
max-width: 750px;
}
}
Mobile-First Approach
Start with mobile styles as default, then enhance for larger screens:
.nav {
flex-direction: column; /* Mobile default */
}
@media (min-width: 768px) {
.nav {
flex-direction: row; /* Tablet enhancement */
}
}
Desktop-First Approach
Start with desktop styles, then adjust for smaller screens (less recommended):
.nav {
flex-direction: row; /* Desktop default */
}
@media (max-width: 767px) {
.nav {
flex-direction: column; /* Mobile adjustment */
}
}
Common Breakpoints
Breakpoints are the screen widths where your design changes. While you should choose breakpoints based on your content, these are commonly used values based on popular frameworks and device data:
Mobile (Default)
< 576px
No media query needed. Start with mobile styles and enhance for larger screens.
Small Devices
≥ 576px
Landscape phones and small tablets. @media (min-width: 576px)
Medium Devices
≥ 768px
Tablets and small laptops. @media (min-width: 768px)
Large Devices
≥ 992px
Desktops and large tablets. @media (min-width: 992px)
X-Large Devices
≥ 1200px
Large desktops. @media (min-width: 1200px)
XX-Large Devices
≥ 1400px
Extra large desktops and 4K screens. @media (min-width: 1400px)
/* Common breakpoints structure */
/* Mobile-first: Start with mobile styles */
/* No media query for mobile (default) */
@media (min-width: 576px) { /* Small devices */ }
@media (min-width: 768px) { /* Medium devices */ }
@media (min-width: 992px) { /* Large devices */ }
@media (min-width: 1200px) { /* X-Large devices */ }
@media (min-width: 1400px) { /* XX-Large devices */ }
Advanced Media Features
Beyond screen size, media queries can target many other device characteristics and user preferences, allowing you to create more accessible and context-aware designs.
Dark Mode
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
Adapt your design to user's dark mode preference.
Reduced Motion
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Respect users with motion sensitivity or vestibular disorders.
Orientation
@media (orientation: landscape) {
.header {
height: 40vh;
}
}
Adjust layouts based on device orientation (portrait vs landscape).
Pointer Type
@media (pointer: coarse) {
button {
min-height: 44px; /* Touch target size */
}
}
Optimize for touch vs mouse input mechanisms.
Complete Media Queries Example
Interactive Media Queries Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Media Queries Masterclass</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary-color: #4f46e5;
--secondary-color: #7c3aed;
--accent-color: #ec4899;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--info-color: #06b6d4;
--dark-color: #1f2937;
--light-color: #f9fafb;
--text-color: #374151;
--text-light: #ffffff;
--border-color: #e5e7eb;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
--border-radius: 0.5rem;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
--font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}
body {
font-family: var(--font-main);
line-height: 1.6;
color: var(--text-color);
background: linear-gradient(135deg, var(--light-color) 0%, #ffffff 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Base Header Styles */
.header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--text-light);
padding: var(--spacing-xl) 0;
text-align: center;
margin-bottom: var(--spacing-xxl);
}
.header h1 {
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
font-weight: bold;
}
.header p {
font-size: 1.125rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* Section Styles */
.section {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow);
}
h2 {
font-size: 2rem;
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 3px solid var(--primary-color);
}
h3 {
font-size: 1.5rem;
color: var(--dark-color);
margin: var(--spacing-lg) 0 var(--spacing-md);
}
p {
margin-bottom: var(--spacing-md);
line-height: 1.7;
}
/* Demo Container */
.demo-container {
background: var(--light-color);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
border: 2px solid var(--border-color);
position: relative;
}
.demo-label {
position: absolute;
top: -10px;
left: var(--spacing-md);
background: var(--primary-color);
color: var(--text-light);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius);
font-size: 0.875rem;
font-weight: bold;
}
/* Breakpoint Indicator */
.breakpoint-indicator {
position: fixed;
top: var(--spacing-md);
right: var(--spacing-md);
background: var(--dark-color);
color: var(--text-light);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
font-family: var(--font-mono);
font-size: 0.75rem;
z-index: 1000;
box-shadow: var(--shadow);
transition: var(--transition);
}
.breakpoint-indicator::before {
content: "📱 Mobile";
font-size: 0.875rem;
}
/* Responsive Grid Demo */
.responsive-grid {
display: grid;
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
grid-template-columns: 1fr;
}
.grid-item {
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: var(--text-light);
padding: var(--spacing-lg);
border-radius: var(--border-radius);
text-align: center;
font-weight: bold;
transition: var(--transition);
position: relative;
}
.grid-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.grid-item-number {
position: absolute;
top: var(--spacing-sm);
left: var(--spacing-sm);
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
/* Navigation Demo */
.nav-demo {
background: var(--dark-color);
border-radius: var(--border-radius);
overflow: hidden;
margin: var(--spacing-lg) 0;
}
.nav-list {
list-style: none;
display: flex;
flex-direction: column;
}
.nav-item {
flex: 1;
}
.nav-link {
display: block;
padding: var(--spacing-md) var(--spacing-lg);
color: var(--text-light);
text-decoration: none;
text-align: center;
transition: var(--transition);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Typography Demo */
.typography-demo {
margin: var(--spacing-lg) 0;
}
.responsive-text {
text-align: center;
margin: var(--spacing-md) 0;
transition: var(--transition);
}
.demo-heading {
font-size: 2rem;
color: var(--primary-color);
font-weight: bold;
}
.demo-subheading {
font-size: 1.5rem;
color: var(--secondary-color);
margin: var(--spacing-sm) 0;
}
.demo-paragraph {
font-size: 1rem;
color: var(--text-color);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Feature Cards */
.feature-cards {
display: grid;
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
grid-template-columns: 1fr;
}
.feature-card {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing-lg);
box-shadow: var(--shadow);
transition: var(--transition);
border: 2px solid var(--border-color);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.feature-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: var(--spacing-md);
}
.feature-card:nth-child(1) .feature-icon {
background: linear-gradient(45deg, var(--success-color), var(--info-color));
}
.feature-card:nth-child(2) .feature-icon {
background: linear-gradient(45deg, var(--warning-color), var(--accent-color));
}
.feature-card:nth-child(3) .feature-icon {
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}
.feature-title {
font-size: 1.25rem;
font-weight: bold;
color: var(--dark-color);
margin-bottom: var(--spacing-sm);
}
.feature-description {
color: var(--text-color);
line-height: 1.6;
margin-bottom: 0;
}
/* Code Block */
.code-block {
background: #1a202c;
color: #e2e8f0;
padding: var(--spacing-lg);
border-radius: var(--border-radius);
overflow-x: auto;
margin: var(--spacing-lg) 0;
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.5;
position: relative;
}
.code-comment {
color: #68d391;
font-style: italic;
}
.code-selector {
color: #63b3ed;
}
.code-property {
color: #fbb6ce;
}
.code-value {
color: #f6ad55;
}
/* Sidebar Layout Demo */
.sidebar-demo {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
min-height: 300px;
margin: var(--spacing-lg) 0;
}
.sidebar {
background: var(--secondary-color);
color: var(--text-light);
padding: var(--spacing-lg);
border-radius: var(--border-radius);
order: 2;
}
.main-content {
background: var(--light-color);
padding: var(--spacing-lg);
border-radius: var(--border-radius);
border: 2px solid var(--border-color);
flex: 1;
order: 1;
}
/* Device-specific content */
.device-content {
padding: var(--spacing-lg);
border-radius: var(--border-radius);
margin: var(--spacing-lg) 0;
text-align: center;
font-weight: bold;
}
.mobile-only {
display: block;
background: var(--success-color);
color: var(--text-light);
}
.tablet-only,
.desktop-only {
display: none;
}
.tablet-only {
background: var(--warning-color);
color: var(--text-light);
}
.desktop-only {
background: var(--info-color);
color: var(--text-light);
}
/* Print Styles Demo */
.print-demo {
background: white;
padding: var(--spacing-lg);
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
margin: var(--spacing-lg) 0;
}
.print-only {
display: none;
background: var(--danger-color);
color: var(--text-light);
padding: var(--spacing-md);
margin: var(--spacing-sm) 0;
border-radius: var(--border-radius);
}
.screen-only {
background: var(--accent-color);
color: var(--text-light);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
/* Orientation Demo */
.orientation-demo {
background: linear-gradient(45deg, var(--accent-color), var(--danger-color));
color: var(--text-light);
padding: var(--spacing-xl);
border-radius: var(--border-radius);
text-align: center;
margin: var(--spacing-lg) 0;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.orientation-text {
font-size: 1.5rem;
font-weight: bold;
}
/* Mobile First Media Queries */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.breakpoint-indicator::before {
content: "📱 Small";
}
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
.demo-heading {
font-size: 2.5rem;
}
.feature-cards {
grid-template-columns: 1fr;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.breakpoint-indicator::before {
content: "💻 Tablet";
}
.header h1 {
font-size: 3.5rem;
}
.header p {
font-size: 1.25rem;
}
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
.nav-list {
flex-direction: row;
}
.nav-link {
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-item:last-child .nav-link {
border-right: none;
}
.demo-heading {
font-size: 3rem;
}
.demo-subheading {
font-size: 2rem;
}
.feature-cards {
grid-template-columns: repeat(2, 1fr);
}
.sidebar-demo {
flex-direction: row;
}
.sidebar {
width: 300px;
flex-shrink: 0;
order: 1;
}
.main-content {
order: 2;
}
.mobile-only {
display: none;
}
.tablet-only {
display: block;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.breakpoint-indicator::before {
content: "🖥️ Desktop";
}
.container {
padding: 0 var(--spacing-lg);
}
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
}
.demo-heading {
font-size: 3.5rem;
}
.feature-cards {
grid-template-columns: repeat(3, 1fr);
}
.tablet-only {
display: none;
}
.desktop-only {
display: block;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.breakpoint-indicator::before {
content: "🖥️ XL Desktop";
}
.header h1 {
font-size: 4rem;
}
.demo-heading {
font-size: 4rem;
}
.responsive-grid {
grid-template-columns: repeat(6, 1fr);
}
}
/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.feature-icon {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}
/* Dark Mode Preference */
@media (prefers-color-scheme: dark) {
:root {
--text-color: #f3f4f6;
--light-color: #374151;
--border-color: #4b5563;
}
body {
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
.section {
background: #1f2937;
color: #f3f4f6;
}
.main-content {
background: #374151;
border-color: #4b5563;
}
}
/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Print Styles */
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
}
.header {
background: none !important;
color: black !important;
border-bottom: 2px solid black;
}
.breakpoint-indicator {
display: none !important;
}
.section {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ccc;
}
.print-only {
display: block !important;
}
.screen-only {
display: none !important;
}
.code-block {
background: #f5f5f5 !important;
color: black !important;
border: 1px solid #ccc;
}
}
/* Landscape Orientation */
@media (orientation: landscape) and (max-width: 1024px) {
.orientation-demo {
background: linear-gradient(45deg, var(--success-color), var(--info-color));
}
.orientation-text::after {
content: " (Landscape)";
font-size: 1rem;
opacity: 0.8;
}
}
/* Portrait Orientation */
@media (orientation: portrait) {
.orientation-text::after {
content: " (Portrait)";
font-size: 1rem;
opacity: 0.8;
}
}
/* Hover Capability */
@media (hover: hover) {
.grid-item:hover {
transform: translateY(-8px) scale(1.02);
}
.feature-card:hover {
transform: translateY(-8px);
}
}
/* Pointer Precision */
@media (pointer: coarse) {
.nav-link {
padding: var(--spacing-lg);
font-size: 1.125rem;
}
.grid-item {
padding: var(--spacing-xl);
}
}
/* Animation examples with media queries */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-large {
animation: none;
}
@media (min-width: 992px) {
.animate-on-large {
animation: slideIn 0.6s ease-out forwards;
}
}
/* Container Queries Preview */
@supports (container-type: inline-size) {
.container-demo {
container-type: inline-size;
border: 2px dashed var(--primary-color);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
@container (min-width: 400px) {
.container-responsive {
display: flex;
gap: var(--spacing-md);
}
}
}
</style>
</head>
<body>
<!-- Breakpoint Indicator -->
<div class="breakpoint-indicator"></div>
<header class="header">
<div class="container">
<h1>CSS Media Queries</h1>
<p>Master responsive design with powerful CSS media queries and conditional styling</p>
</div>
</header>
<div class="container">
<!-- Introduction -->
<section class="section">
<h2>Understanding Media Queries</h2>
<p>
Media queries are a CSS technique that allows you to apply styles conditionally based on device characteristics
like screen size, resolution, orientation, and user preferences. They are the foundation of responsive web design.
</p>
<p>
With media queries, you can create websites that adapt seamlessly to any device, from smartphones to ultra-wide monitors,
providing an optimal user experience regardless of how users access your content.
</p>
<div class="demo-container">
<div class="demo-label">Live Breakpoint Demo</div>
<div class="responsive-grid">
<div class="grid-item">
<div class="grid-item-number">1</div>
Item 1
</div>
<div class="grid-item">
<div class="grid-item-number">2</div>
Item 2
</div>
<div class="grid-item">
<div class="grid-item-number">3</div>
Item 3
</div>
<div class="grid-item">
<div class="grid-item-number">4</div>
Item 4
</div>
<div class="grid-item">
<div class="grid-item-number">5</div>
Item 5
</div>
<div class="grid-item">
<div class="grid-item-number">6</div>
Item 6
</div>
</div>
<p><strong>Resize your browser window to see the grid adapt!</strong> Watch the indicator in the top-right corner.</p>
</div>
</section>
<!-- Basic Syntax -->
<section class="section">
<h2>Media Query Syntax</h2>
<p>
Media queries use the <code>@media</code> rule to conditionally apply CSS styles. They can test for various device characteristics
and user preferences.
</p>
<div class="code-block">
<span class="code-comment">/* Basic media query syntax */</span><br>
<span class="code-selector">@media</span> <span class="code-value">media-type</span> <span class="code-value">and</span> <span class="code-value">(condition)</span> {<br>
<span class="code-comment">/* CSS rules here */</span><br>
}<br><br>
<span class="code-comment">/* Example: Styles for tablets and up */</span><br>
<span class="code-selector">@media</span> <span class="code-value">screen</span> <span class="code-value">and</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.container</span> {<br>
<span class="code-property">max-width</span>: <span class="code-value">750px</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Mobile-first approach (recommended) */</span><br>
<span class="code-selector">.nav</span> {<br>
<span class="code-property">flex-direction</span>: <span class="code-value">column</span>; <span class="code-comment">/* Mobile default */</span><br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.nav</span> {<br>
<span class="code-property">flex-direction</span>: <span class="code-value">row</span>; <span class="code-comment">/* Enhance for larger screens */</span><br>
}<br>
}
</div>
</section>
<!-- Breakpoints -->
<section class="section">
<h2>Common Breakpoints</h2>
<p>
Breakpoints are the screen widths where your design changes. Here are commonly used breakpoints based on popular frameworks and real device data:
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">📱</div>
<div class="feature-title">Mobile (Default)</div>
<div class="feature-description">
320px - 575px<br>
No media query needed<br>
Mobile-first approach
</div>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<div class="feature-title">Small (576px+)</div>
<div class="feature-description">
Landscape phones<br>
@media (min-width: 576px)<br>
Small tablets
</div>
</div>
<div class="feature-card">
<div class="feature-icon">💻</div>
<div class="feature-title">Medium (768px+)</div>
<div class="feature-description">
Tablets<br>
@media (min-width: 768px)<br>
Small laptops
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🖥️</div>
<div class="feature-title">Large (992px+)</div>
<div class="feature-description">
Desktops<br>
@media (min-width: 992px)<br>
Large tablets
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🖥️</div>
<div class="feature-title">X-Large (1200px+)</div>
<div class="feature-description">
Large desktops<br>
@media (min-width: 1200px)<br>
Ultra-wide monitors
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🖥️</div>
<div class="feature-title">XX-Large (1400px+)</div>
<div class="feature-description">
Extra large desktops<br>
@media (min-width: 1400px)<br>
4K and ultra-wide
</div>
</div>
</div>
<div class="code-block">
<span class="code-comment">/* Common breakpoints structure */</span><br>
<span class="code-comment">/* Mobile-first: Start with mobile styles */</span><br>
<span class="code-comment">/* No media query for mobile (default) */</span><br><br>
<span class="code-comment">// Small devices (landscape phones, 576px and up) */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 576px)</span> { <span class="code-comment">/* ... */</span> }<br><br>
<span class="code-comment">// Medium devices (tablets, 768px and up) */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> { <span class="code-comment">/* ... */</span> }<br><br>
<span class="code-comment">// Large devices (desktops, 992px and up) */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 992px)</span> { <span class="code-comment">/* ... */</span> }<br><br>
<span class="code-comment">// X-Large devices (large desktops, 1200px and up) */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 1200px)</span> { <span class="code-comment">/* ... */</span> }<br><br>
<span class="code-comment">// XX-Large devices (larger desktops, 1400px and up) */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 1400px)</span> { <span class="code-comment">/* ... */</span> }
</div>
</section>
<!-- Navigation Demo -->
<section class="section">
<h2>Responsive Navigation Demo</h2>
<p>
See how a navigation menu can transform from mobile to desktop layout using media queries:
</p>
<div class="demo-container">
<div class="demo-label">Navigation Demo</div>
<nav class="nav-demo">
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
<p><strong>Resize your browser to see the navigation change from vertical to horizontal layout!</strong></p>
</div>
<div class="code-block">
<span class="code-comment">/* Mobile-first navigation */</span><br>
<span class="code-selector">.nav-list</span> {<br>
<span class="code-property">display</span>: <span class="code-value">flex</span>;<br>
<span class="code-property">flex-direction</span>: <span class="code-value">column</span>; <span class="code-comment">/* Stack items vertically */</span><br>
}<br><br>
<span class="code-selector">.nav-link</span> {<br>
<span class="code-property">border-bottom</span>: <span class="code-value">1px solid rgba(255, 255, 255, 0.1)</span>;<br>
}<br><br>
<span class="code-comment">/* Tablet and up */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.nav-list</span> {<br>
<span class="code-property">flex-direction</span>: <span class="code-value">row</span>; <span class="code-comment">/* Horizontal layout */</span><br>
}<br>
<span class="code-selector">.nav-link</span> {<br>
<span class="code-property">border-bottom</span>: <span class="code-value">none</span>;<br>
<span class="code-property">border-right</span>: <span class="code-value">1px solid rgba(255, 255, 255, 0.1)</span>;<br>
}<br>
<span class="code-selector">.nav-item:last-child .nav-link</span> {<br>
<span class="code-property">border-right</span>: <span class="code-value">none</span>;<br>
}<br>
}
</div>
</section>
<!-- Responsive Typography -->
<section class="section">
<h2>Responsive Typography</h2>
<p>
Media queries allow you to create fluid typography that adapts to different screen sizes, improving readability and user experience.
</p>
<div class="typography-demo">
<div class="responsive-text demo-heading">Responsive Heading</div>
<div class="responsive-text demo-subheading">Adaptive Subheading</div>
<div class="responsive-text demo-paragraph">
This paragraph text scales appropriately based on screen size. On mobile devices, the text is smaller and more compact, while on larger screens it expands to maintain optimal readability and line length.
</div>
</div>
<div class="code-block">
<span class="code-comment">/* Responsive typography with media queries */</span><br>
<span class="code-selector">.demo-heading</span> {<br>
<span class="code-property">font-size</span>: <span class="code-value">2rem</span>; <span class="code-comment">/* Mobile size */</span><br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 576px)</span> {<br>
<span class="code-selector">.demo-heading</span> {<br>
<span class="code-property">font-size</span>: <span class="code-value">2.5rem</span>;<br>
}<br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.demo-heading</span> {<br>
<span class="code-property">font-size</span>: <span class="code-value">3rem</span>;<br>
}<br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 992px)</span> {<br>
<span class="code-selector">.demo-heading</span> {<br>
<span class="code-property">font-size</span>: <span class="code-value">3.5rem</span>;<br>
}<br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 1200px)</span> {<br>
<span class="code-selector">.demo-heading</span> {<br>
<span class="code-property">font-size</span>: <span class="code-value">4rem</span>;<br>
}<br>
}
</div>
</section>
<!-- Layout Changes -->
<section class="section">
<h2>Responsive Layout Changes</h2>
<p>
Media queries enable dramatic layout changes between different screen sizes. Here's an example of a sidebar layout that transforms from mobile to desktop:
</p>
<div class="demo-container">
<div class="demo-label">Layout Demo</div>
<div class="sidebar-demo">
<aside class="sidebar">
<h3>Sidebar</h3>
<p>This sidebar changes position and width based on screen size.</p>
</aside>
<main class="main-content">
<h3>Main Content</h3>
<p>This is the main content area. On mobile devices, the sidebar appears below the content, while on larger screens it moves to the side with a fixed width.</p>
<p>Resize your browser to see the layout change!</p>
</main>
</div>
</div>
<div class="code-block">
<span class="code-comment">/* Mobile-first: sidebar below content */</span><br>
<span class="code-selector">.sidebar-demo</span> {<br>
<span class="code-property">display</span>: <span class="code-value">flex</span>;<br>
<span class="code-property">flex-direction</span>: <span class="code-value">column</span>;<br>
}<br><br>
<span class="code-selector">.sidebar</span> {<br>
<span class="code-property">order</span>: <span class="code-value">2</span>; <span class="code-comment">/* Appears second */</span><br>
}<br><br>
<span class="code-selector">.main-content</span> {<br>
<span class="code-property">order</span>: <span class="code-value">1</span>; <span class="code-comment">/* Appears first */</span><br>
}<br><br>
<span class="code-comment">/* Tablet and up: sidebar beside content */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.sidebar-demo</span> {<br>
<span class="code-property">flex-direction</span>: <span class="code-value">row</span>;<br>
}<br>
<span class="code-selector">.sidebar</span> {<br>
<span class="code-property">width</span>: <span class="code-value">300px</span>;<br>
<span class="code-property">flex-shrink</span>: <span class="code-value">0</span>;<br>
<span class="code-property">order</span>: <span class="code-value">1</span>; <span class="code-comment">/* Appears first */</span><br>
}<br>
<span class="code-selector">.main-content</span> {<br>
<span class="code-property">order</span>: <span class="code-value">2</span>; <span class="code-comment">/* Appears second */</span><br>
}<br>
}
</div>
</section>
<!-- Device-Specific Content -->
<section class="section">
<h2>Device-Specific Content</h2>
<p>
You can show or hide content based on device characteristics using media queries. This is useful for optimizing content for different contexts.
</p>
<div class="demo-container">
<div class="demo-label">Device Content</div>
<div class="device-content mobile-only">
This content is only visible on mobile devices.
</div>
<div class="device-content tablet-only">
This content is only visible on tablets.
</div>
<div class="device-content desktop-only">
This content is only visible on desktop devices.
</div>
<p><strong>Resize your browser to see different content appear based on screen size!</strong></p>
</div>
<div class="code-block">
<span class="code-comment">/* Default: show mobile content */</span><br>
<span class="code-selector">.mobile-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">block</span>;<br>
}<br>
<span class="code-selector">.tablet-only</span>,<br>
<span class="code-selector">.desktop-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">none</span>;<br>
}<br><br>
<span class="code-comment">/* Tablet: show tablet content */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.mobile-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">none</span>;<br>
}<br>
<span class="code-selector">.tablet-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">block</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Desktop: show desktop content */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 992px)</span> {<br>
<span class="code-selector">.tablet-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">none</span>;<br>
}<br>
<span class="code-selector">.desktop-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">block</span>;<br>
}<br>
}
</div>
</section>
<!-- Advanced Media Features -->
<section class="section">
<h2>Advanced Media Features</h2>
<p>
Beyond screen size, media queries can target many other device characteristics and user preferences:
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">🎨</div>
<div class="feature-title">Color Scheme</div>
<div class="feature-description">
@media (prefers-color-scheme: dark)<br>
@media (prefers-color-scheme: light)<br>
Adapt to user's theme preference
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🚫</div>
<div class="feature-title">Reduced Motion</div>
<div class="feature-description">
@media (prefers-reduced-motion: reduce)<br>
Respect users with motion sensitivity<br>
Remove or simplify animations
</div>
</div>
<div class="feature-card">
<div class="feature-icon">📐</div>
<div class="feature-title">Orientation</div>
<div class="feature-description">
@media (orientation: portrait)<br>
@media (orientation: landscape)<br>
Adapt to device orientation
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🖱️</div>
<div class="feature-title">Pointer Type</div>
<div class="feature-description">
@media (pointer: coarse)<br>
@media (pointer: fine)<br>
Adapt to touch vs mouse input
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🖨️</div>
<div class="feature-title">Print Styles</div>
<div class="feature-description">
@media print<br>
Optimize content for printing<br>
Remove unnecessary elements
</div>
</div>
<div class="feature-card">
<div class="feature-icon">👁️</div>
<div class="feature-title">Contrast Preference</div>
<div class="feature-description">
@media (prefers-contrast: high)<br>
@media (prefers-contrast: more)<br>
Enhance accessibility
</div>
</div>
</div>
<div class="code-block">
<span class="code-comment">/* Dark mode preference */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(prefers-color-scheme: dark)</span> {<br>
<span class="code-selector">body</span> {<br>
<span class="code-property">background-color</span>: <span class="code-value">#1a1a1a</span>;<br>
<span class="code-property">color</span>: <span class="code-value">#ffffff</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Reduced motion preference */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(prefers-reduced-motion: reduce)</span> {<br>
<span class="code-selector">*</span> {<br>
<span class="code-property">animation-duration</span>: <span class="code-value">0.01ms !important</span>;<br>
<span class="code-property">animation-iteration-count</span>: <span class="code-value">1 !important</span>;<br>
<span class="code-property">transition-duration</span>: <span class="code-value">0.01ms !important</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Device orientation */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(orientation: landscape)</span> {<br>
<span class="code-selector">.header</span> {<br>
<span class="code-property">height</span>: <span class="code-value">40vh</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Pointer type (touch vs mouse) */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(pointer: coarse)</span> {<br>
<span class="code-selector">button</span> {<br>
<span class="code-property">min-height</span>: <span class="code-value">44px</span>; <span class="code-comment">/* Touch target size */</span><br>
}<br>
}
</div>
</section>
<!-- Print Styles -->
<section class="section">
<h2>Print Styles</h2>
<p>
Media queries allow you to create optimized print styles that remove unnecessary elements, adjust colors for printing, and ensure your content looks good on paper.
</p>
<div class="print-demo">
<div class="screen-only">
This content is visible on screen but will be hidden when printed.
</div>
<div class="print-only">
This content is only visible when printed.
</div>
<p>Try printing this page (or use print preview) to see the print styles in action!</p>
</div>
<div class="code-block">
<span class="code-comment">/* Print styles */</span><br>
<span class="code-selector">@media</span> <span class="code-value">print</span> {<br>
<span class="code-comment">/* Remove background colors and images */</span><br>
<span class="code-selector">*</span> {<br>
<span class="code-property">background</span>: <span class="code-value">transparent !important</span>;<br>
<span class="code-property">color</span>: <span class="code-value">black !important</span>;<br>
<span class="code-property">box-shadow</span>: <span class="code-value">none !important</span>;<br>
}<br><br>
<span class="code-comment">/* Hide unnecessary elements */</span><br>
<span class="code-selector">.breakpoint-indicator</span>,<br>
<span class="code-selector">.nav-demo</span>,<br>
<span class="code-selector">.screen-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">none !important</span>;<br>
}<br><br>
<span class="code-comment">/* Show print-only content */</span><br>
<span class="code-selector">.print-only</span> {<br>
<span class="code-property">display</span>: <span class="code-value">block !important</span>;<br>
}<br><br>
<span class="code-comment">/* Adjust typography for print */</span><br>
<span class="code-selector">body</span> {<br>
<span class="code-property">font-size</span>: <span class="code-value">12pt</span>;<br>
<span class="code-property">line-height</span>: <span class="code-value">1.5</span>;<br>
}<br><br>
<span class="code-comment">/* Ensure URLs are visible in links */</span><br>
<span class="code-selector">a</span>::<span class="code-value">after</span> {<br>
<span class="code-property">content</span>: <span class="code-value">" (" attr(href) ")"</span>;<br>
}<br>
}
</div>
</section>
<!-- Orientation Demo -->
<section class="section">
<h2>Orientation Detection</h2>
<p>
Media queries can detect device orientation, allowing you to optimize layouts for portrait or landscape modes.
</p>
<div class="orientation-demo">
<div class="orientation-text">
Current Orientation
</div>
<p>Rotate your device or resize your browser to see this change!</p>
</div>
<div class="code-block">
<span class="code-comment">/* Portrait orientation */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(orientation: portrait)</span> {<br>
<span class="code-selector">.orientation-demo</span> {<br>
<span class="code-property">background</span>: <span class="code-value">linear-gradient(45deg, var(--primary-color), var(--secondary-color))</span>;<br>
}<br>
<span class="code-selector">.orientation-text</span>::<span class="code-value">after</span> {<br>
<span class="code-property">content</span>: <span class="code-value">" (Portrait)"</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Landscape orientation */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(orientation: landscape)</span> {<br>
<span class="code-selector">.orientation-demo</span> {<br>
<span class="code-property">background</span>: <span class="code-value">linear-gradient(45deg, var(--success-color), var(--info-color))</span>;<br>
}<br>
<span class="code-selector">.orientation-text</span>::<span class="code-value">after</span> {<br>
<span class="code-property">content</span>: <span class="code-value">" (Landscape)"</span>;<br>
}<br>
}
</div>
</section>
<!-- Performance Considerations -->
<section class="section">
<h2>Performance Considerations</h2>
<p>
While media queries are essential for responsive design, they can impact performance if not used carefully. Here are some best practices:
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Minimize Complexity</div>
<div class="feature-description">
Keep media queries simple<br>
Avoid deeply nested queries<br>
Use efficient selectors
</div>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<div class="feature-title">Mobile First</div>
<div class="feature-description">
Start with mobile styles<br>
Enhance for larger screens<br>
Reduces code complexity
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Logical Breakpoints</div>
<div class="feature-description">
Use content-based breakpoints<br>
Avoid device-specific breakpoints<br>
Test on real devices
</div>
</div>
</div>
<div class="code-block">
<span class="code-comment">/* ✅ Good: Mobile-first, simple queries */</span><br>
<span class="code-selector">.element</span> {<br>
<span class="code-property">width</span>: <span class="code-value">100%</span>; <span class="code-comment">/* Mobile default */</span><br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 768px)</span> {<br>
<span class="code-selector">.element</span> {<br>
<span class="code-property">width</span>: <span class="code-value">50%</span>; <span class="code-comment">/* Tablet enhancement */</span><br>
}<br>
}<br><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 1200px)</span> {<br>
<span class="code-selector">.element</span> {<br>
<span class="code-property">width</span>: <span class="code-value">33.333%</span>; <span class="code-comment">/* Desktop enhancement */</span><br>
}<br>
}<br><br>
<span class="code-comment">/* ❌ Avoid: Complex, device-specific queries */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)</span> {<br>
<span class="code-comment">/* Too specific and complex */</span><br>
}
</div>
</section>
<!-- Future of Media Queries -->
<section class="section">
<h2>Future of Media Queries</h2>
<p>
CSS is constantly evolving, and new media features are being developed to address emerging needs:
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">📦</div>
<div class="feature-title">Container Queries</div>
<div class="feature-description">
Style based on container size<br>
More flexible than viewport queries<br>
@container (min-width: 300px)
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<div class="feature-title">Color Gamut</div>
<div class="feature-description">
@media (color-gamut: p3)<br>
Detect wide color support<br>
Serve enhanced color content
</div>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Performance</div>
<div class="feature-description">
@media (prefers-reduced-data: reduce)<br>
@media (prefers-performance: high)<br>
Adapt to device capabilities
</div>
</div>
</div>
<div class="code-block">
<span class="code-comment">/* Container queries (future) */</span><br>
<span class="code-selector">.component</span> {<br>
<span class="code-property">container-type</span>: <span class="code-value">inline-size</span>;<br>
}<br><br>
<span class="code-selector">@container</span> <span class="code-value">(min-width: 400px)</span> {<br>
<span class="code-selector">.component</span> {<br>
<span class="code-property">display</span>: <span class="code-value">flex</span>;<br>
}<br>
}<br><br>
<span class="code-comment">/* Color gamut detection */</span><br>
<span class="code-selector">@media</span> <span class="code-value">(color-gamut: p3)</span> {<br>
<span class="code-selector">.element</span> {<br>
<span class="code-property">background-color</span>: <span class="code-value">color(display-p3 1 0 0)</span>; <span class="code-comment">/* Wide color */</span><br>
}<br>
}
</div>
</section>
<!-- Summary -->
<section class="section">
<h2>Summary</h2>
<p>
CSS media queries are powerful tools for creating responsive, adaptive designs that work across a wide range of devices and user preferences. By understanding and implementing media queries effectively, you can ensure your websites provide an optimal experience for all users.
</p>
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon">✅</div>
<div class="feature-title">Key Takeaways</div>
<div class="feature-description">
Use mobile-first approach<br>
Choose content-based breakpoints<br>
Test on real devices<br>
Consider performance impacts
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Best Practices</div>
<div class="feature-description">
Keep queries simple<br>
Use semantic breakpoints<br>
Consider accessibility<br>
Future-proof your code
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<div class="feature-title">Advanced Features</div>
<div class="feature-description">
User preference queries<br>
Environmental detection<br>
Container queries (future)<br>
Performance adaptation
</div>
</div>
</div>
</section>
</div>
<script>
// Update breakpoint indicator
function updateBreakpointIndicator() {
const width = window.innerWidth;
const indicator = document.querySelector('.breakpoint-indicator');
if (!indicator) return;
if (width >= 1400) {
indicator.textContent = "XX-Large (1400px+)";
} else if (width >= 1200) {
indicator.textContent = "X-Large (1200px+)";
} else if (width >= 992) {
indicator.textContent = "Large (992px+)";
} else if (width >= 768) {
indicator.textContent = "Medium (768px+)";
} else if (width >= 576) {
indicator.textContent = "Small (576px+)";
} else {
indicator.textContent = "Mobile (<576px)";
}
}
// Update on load and resize
updateBreakpointIndicator();
window.addEventListener('resize', updateBreakpointIndicator);
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>Ready to Master Media Queries?
Experiment with our interactive example that demonstrates all media query features in action. Resize your browser window and see how the layout adapts in real-time!