CSS 30 💻 media queries introduction
Media queries are the foundation of responsive web design. They allow you to apply different styles based on the user’s device characteristics — screen size, orientation, resolution, and more.
What are Media Queries?
A media query is a CSS technique that applies styles conditionally based on the characteristics of the device or viewport. They’re defined using the @media rule.
@media screen and (min-width: 780px) {
div {
display: flex;
}
}What happens:
- The styles inside the block are applied only when the condition is true
- The condition is: screen device AND viewport width ≥ 780px
- On smaller screens, the styles are ignored
Media Types
| Type | Description |
|---|---|
all | All devices (default) |
print | Print preview mode and printed pages |
screen | Screens (desktops, laptops, tablets, phones) |
/* All devices */
@media all {
body { margin: 0; }
}
/* Print only */
@media print {
div {
background-color: white;
color: black;
}
}
/* Screen only */
@media screen {
body { background: #f8f9fa; }
}Logical Operators
| Operator | Description | Example |
|---|---|---|
and | Combines multiple conditions (all must be true) | screen and (min-width: 780px) |
not | Negates a condition | not (hover: hover) |
only | Prevents older browsers from applying styles | only screen and (min-width: 780px) |
, (or) | Either condition can be true | screen, print |
/* AND — both conditions must be true */
@media screen and (min-width: 780px) {
div { display: flex; }
}
/* NOT — condition must be false */
@media not (hover: hover) {
.no-hover { display: none; }
}
/* ONLY — for older browsers */
@media only screen and (min-width: 780px) {
div { display: flex; }
}
/* OR — either condition can be true */
@media screen, print {
body { font-family: Arial, sans-serif; }
}Common Media Features (Descriptors)
| Feature | Description | Example |
|---|---|---|
width | Viewport width | (min-width: 768px) |
height | Viewport height | (min-height: 600px) |
aspect-ratio | Aspect ratio of viewport | (aspect-ratio: 16/9) |
orientation | Portrait or landscape | (orientation: landscape) |
resolution | Pixel density | (min-resolution: 2dppx) |
hover | Hover capability | (hover: hover) |
pointer | Pointer accuracy | (pointer: fine) |
prefers-color-scheme | Light or dark mode | (prefers-color-scheme: dark) |
prefers-reduced-motion | Reduced motion preference | (prefers-reduced-motion: reduce) |
/* Width-based */
@media (min-width: 768px) and (max-width: 1024px) {
body { font-size: 16px; }
}
/* Orientation-based */
@media (orientation: landscape) {
body { background-color: lightblue; }
}
/* Hover capability */
@media not (hover: hover) {
.no-hover { display: none; }
}
/* Dark mode preference */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #fff; }
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
* { animation: none; transition: none; }
}Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries Introduction</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
line-height: 1.6;
transition: background 0.3s, color 0.3s;
}
h1 {
color: #007bff;
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
}
h2 {
color: #28a745;
border-left: 4px solid #28a745;
padding-left: 15px;
margin-top: 30px;
}
h3 {
color: #333;
margin-top: 20px;
}
section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px 0;
transition: background 0.3s, color 0.3s;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.8;
margin: 10px 0;
}
.reference-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.reference-table th,
.reference-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.reference-table th {
background: #007bff;
color: white;
}
.reference-table tr:nth-child(even) {
background: #f8f9fa;
}
.note {
font-size: 0.9rem;
color: #6c757d;
margin-top: 5px;
}
.highlight {
background: #ffc107;
color: #333;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}
/* ====== RESPONSIVE DEMO ====== */
.responsive-demo {
display: block;
padding: 20px;
border: 2px dashed #007bff;
border-radius: 8px;
margin: 15px 0;
background: #e9ecef;
text-align: center;
}
.responsive-demo .icon {
font-size: 3rem;
display: block;
margin-bottom: 10px;
}
.responsive-demo .label {
font-weight: bold;
color: #007bff;
}
/* Default: Mobile (small screens) */
.responsive-demo {
background: #ff6b6b;
color: white;
}
.responsive-demo .label::before {
content: "📱 Mobile";
}
/* Tablet: 768px and up */
@media (min-width: 768px) {
.responsive-demo {
background: #ffc107;
color: #333;
}
.responsive-demo .label::before {
content: "📟 Tablet";
}
}
/* Desktop: 1024px and up */
@media (min-width: 1024px) {
.responsive-demo {
background: #28a745;
color: white;
}
.responsive-demo .label::before {
content: "💻 Desktop";
}
}
/* Large Desktop: 1400px and up */
@media (min-width: 1400px) {
.responsive-demo {
background: #6c5ce7;
color: white;
}
.responsive-demo .label::before {
content: "🖥️ Large Desktop";
}
}
/* ====== ORIENTATION DEMO ====== */
.orientation-demo {
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: bold;
background: #17a2b8;
color: white;
margin: 15px 0;
}
.orientation-demo::before {
content: "🔄 Portrait Mode";
}
@media (orientation: landscape) {
.orientation-demo {
background: #fd7e14;
}
.orientation-demo::before {
content: "🔄 Landscape Mode";
}
}
/* ====== DARK MODE ====== */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f8f9fa;
}
section {
background: #2d2d2d;
color: #f8f9fa;
}
h1 {
color: #4dabf7;
border-bottom-color: #4dabf7;
}
h2 {
color: #69db7c;
border-left-color: #69db7c;
}
h3 {
color: #f8f9fa;
}
.reference-table th {
background: #4dabf7;
}
.reference-table tr:nth-child(even) {
background: #3d3d3d;
}
.reference-table td {
border-color: #555;
}
.responsive-demo {
background: #364fc7;
color: white;
}
.code-block {
background: #0d0d0d;
}
.note {
color: #adb5bd;
}
}
/* ====== HOVER CAPABILITY ====== */
.hover-demo {
padding: 15px;
background: #007bff;
color: white;
border-radius: 8px;
text-align: center;
font-weight: bold;
margin: 15px 0;
}
@media not (hover: hover) {
.hover-demo {
background: #dc3545;
}
.hover-demo::before {
content: "📱 Touch device — hover not available";
}
}
@media (hover: hover) {
.hover-demo:hover {
background: #28a745;
transform: scale(1.02);
transition: all 0.3s;
}
}
/* ====== REDUCED MOTION ====== */
.motion-demo {
padding: 20px;
background: #6c5ce7;
color: white;
border-radius: 8px;
text-align: center;
font-weight: bold;
animation: pulse 2s infinite;
margin: 15px 0;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.motion-demo {
animation: none;
}
.motion-demo::after {
content: " (animation disabled)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* ====== PRINT STYLES ====== */
@media print {
body {
background: white;
color: black;
font-size: 12pt;
}
section {
box-shadow: none;
border: 1px solid #ccc;
page-break-inside: avoid;
}
.code-block {
background: #f4f4f4;
color: #333;
border: 1px solid #ddd;
}
.no-print {
display: none;
}
}
/* ====== BREAKPOINT VISUALIZATION ====== */
.breakpoint-indicator {
position: fixed;
bottom: 20px;
right: 20px;
background: #007bff;
color: white;
padding: 10px 20px;
border-radius: 50px;
font-weight: bold;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(0,123,255,0.4);
z-index: 1000;
}
.breakpoint-indicator::before {
content: "📱 < 768px";
}
@media (min-width: 768px) {
.breakpoint-indicator {
background: #ffc107;
color: #333;
}
.breakpoint-indicator::before {
content: "📟 768px - 1023px";
}
}
@media (min-width: 1024px) {
.breakpoint-indicator {
background: #28a745;
color: white;
}
.breakpoint-indicator::before {
content: "💻 1024px - 1399px";
}
}
@media (min-width: 1400px) {
.breakpoint-indicator {
background: #6c5ce7;
color: white;
}
.breakpoint-indicator::before {
content: "🖥️ ≥ 1400px";
}
}
</style>
</head>
<body>
<h1>Media Queries Introduction</h1>
<!-- ====== 1. RESPONSIVE DEMO ====== -->
<section>
<h2>1. Responsive Breakpoints</h2>
<p>Resize your browser to see the breakpoint change!</p>
<div class="responsive-demo">
<span class="icon">📱</span>
<span class="label"></span>
<p>Current breakpoint: <span class="highlight" id="current-breakpoint">Resize to see</span></p>
</div>
<div class="code-block">
/* Mobile first — default styles */
.responsive-demo {
background: #ff6b6b;
}
/* Tablet: 768px and up */
@media (min-width: 768px) {
.responsive-demo {
background: #ffc107;
}
}
/* Desktop: 1024px and up */
@media (min-width: 1024px) {
.responsive-demo {
background: #28a745;
}
}
/* Large Desktop: 1400px and up */
@media (min-width: 1400px) {
.responsive-demo {
background: #6c5ce7;
}
}
</div>
</section>
<!-- ====== 2. ORIENTATION ====== -->
<section>
<h2>2. Orientation</h2>
<p>Rotate your device or resize your browser to change orientation.</p>
<div class="orientation-demo"></div>
<div class="code-block">
/* Portrait (default) */
.orientation-demo::before {
content: "Portrait Mode";
}
/* Landscape */
@media (orientation: landscape) {
.orientation-demo {
background: #fd7e14;
}
.orientation-demo::before {
content: "Landscape Mode";
}
}
</div>
</section>
<!-- ====== 3. DARK MODE ====== -->
<section>
<h2>3. Dark Mode (prefers-color-scheme)</h2>
<p>This page automatically adapts to your system's dark mode preference.</p>
<div class="code-block">
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f8f9fa;
}
section {
background: #2d2d2d;
}
}
</div>
</section>
<!-- ====== 4. HOVER CAPABILITY ====== -->
<section>
<h2>4. Hover Capability</h2>
<p>This element changes style on hover (desktop) or shows a message (touch devices).</p>
<div class="hover-demo">
<span class="no-hover-text">Hover over me (if you can!)</span>
</div>
<div class="code-block">
/* For devices with hover capability */
@media (hover: hover) {
.hover-demo:hover {
background: #28a745;
}
}
/* For touch devices without hover */
@media not (hover: hover) {
.hover-demo {
background: #dc3545;
}
}
</div>
</section>
<!-- ====== 5. REDUCED MOTION ====== -->
<section>
<h2>5. Reduced Motion</h2>
<p>This element respects your system's reduced motion preference.</p>
<div class="motion-demo">
⚡ Animated Element
</div>
<div class="code-block">
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.motion-demo {
animation: pulse 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.motion-demo {
animation: none;
}
}
</div>
</section>
<!-- ====== 6. PRINT STYLES ====== -->
<section>
<h2>6. Print Styles</h2>
<p>Print this page to see the print-specific styles in action.</p>
<div class="code-block no-print">
@media print {
body {
background: white;
color: black;
}
.no-print {
display: none;
}
}
</div>
<p class="note">This entire section is styled differently when printed.</p>
</section>
<!-- ====== 7. REFERENCE TABLES ====== -->
<section>
<h2>7. Reference Tables</h2>
<h3>Media Types</h3>
<table class="reference-table">
<tr>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>all</code></td>
<td>All devices (default)</td>
</tr>
<tr>
<td><code>print</code></td>
<td>Print preview mode and printed pages</td>
</tr>
<tr>
<td><code>screen</code></td>
<td>Screens (desktops, laptops, tablets, phones)</td>
</tr>
</table>
<h3>Logical Operators</h3>
<table class="reference-table">
<tr>
<th>Operator</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><code>and</code></td>
<td>Both conditions must be true</td>
<td><code>screen and (min-width: 780px)</code></td>
</tr>
<tr>
<td><code>not</code></td>
<td>Negates a condition</td>
<td><code>not (hover: hover)</code></td>
</tr>
<tr>
<td><code>only</code></td>
<td>For older browsers</td>
<td><code>only screen and (min-width: 780px)</code></td>
</tr>
<tr>
<td><code>,</code></td>
<td>Either condition can be true</td>
<td><code>screen, print</code></td>
</tr>
</table>
<h3>Common Media Features</h3>
<table class="reference-table">
<tr>
<th>Feature</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><code>width</code></td>
<td>Viewport width</td>
<td><code>(min-width: 768px)</code></td>
</tr>
<tr>
<td><code>height</code></td>
<td>Viewport height</td>
<td><code>(min-height: 600px)</code></td>
</tr>
<tr>
<td><code>orientation</code></td>
<td>Portrait or landscape</td>
<td><code>(orientation: landscape)</code></td>
</tr>
<tr>
<td><code>aspect-ratio</code></td>
<td>Aspect ratio of viewport</td>
<td><code>(aspect-ratio: 16/9)</code></td>
</tr>
<tr>
<td><code>resolution</code></td>
<td>Pixel density</td>
<td><code>(min-resolution: 2dppx)</code></td>
</tr>
<tr>
<td><code>hover</code></td>
<td>Hover capability</td>
<td><code>(hover: hover)</code></td>
</tr>
<tr>
<td><code>pointer</code></td>
<td>Pointer accuracy</td>
<td><code>(pointer: fine)</code></td>
</tr>
<tr>
<td><code>prefers-color-scheme</code></td>
<td>Light or dark mode</td>
<td><code>(prefers-color-scheme: dark)</code></td>
</tr>
<tr>
<td><code>prefers-reduced-motion</code></td>
<td>Reduced motion preference</td>
<td><code>(prefers-reduced-motion: reduce)</code></td>
</tr>
</table>
<h3>Common Breakpoints</h3>
<table class="reference-table">
<tr>
<th>Device</th>
<th>Breakpoint</th>
<th>Example</th>
</tr>
<tr>
<td>Mobile</td>
<td>< 768px</td>
<td><code>@media (max-width: 767px)</code></td>
</tr>
<tr>
<td>Tablet</td>
<td>768px – 1023px</td>
<td><code>@media (min-width: 768px) and (max-width: 1023px)</code></td>
</tr>
<tr>
<td>Desktop</td>
<td>1024px – 1399px</td>
<td><code>@media (min-width: 1024px)</code></td>
</tr>
<tr>
<td>Large Desktop</td>
<td>≥ 1400px</td>
<td><code>@media (min-width: 1400px)</code></td>
</tr>
</table>
</section>
<!-- ====== 8. BEST PRACTICES ====== -->
<section>
<h2>8. Best Practices</h2>
<div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
<h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
<ul>
<li><strong>Mobile First</strong> — Start with the smallest screen and build up</li>
<li>Use <strong>relative units</strong> (em, rem, %) instead of fixed pixels</li>
<li>Aim for a <strong>breakpoint every 50–70 pixels</strong> or so</li>
<li><strong>Test thoroughly</strong> on various devices and screen sizes</li>
<li>Use <code>prefers-color-scheme</code> for dark mode support</li>
<li>Use <code>prefers-reduced-motion</code> for accessibility</li>
<li>Use <code>@media print</code> to optimize for printing</li>
</ul>
</div>
<div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
<h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
<ul>
<li>Don't <strong>overuse media queries</strong> — too many can slow down your site</li>
<li>Don't use <strong>fixed units</strong> (px) for everything</li>
<li>Don't ignore <strong>accessibility</strong> features like reduced motion</li>
<li>Don't forget to include the <strong>viewport meta tag</strong></li>
<li>Don't design only for one device — test everywhere</li>
</ul>
</div>
</section>
<!-- ====== BREAKPOINT INDICATOR ====== -->
<div class="breakpoint-indicator"></div>
<!-- ====== SCRIPT FOR BREAKPOINT DISPLAY ====== -->
<script>
function updateBreakpoint() {
const width = window.innerWidth;
const el = document.getElementById('current-breakpoint');
if (width < 768) {
el.textContent = '📱 Mobile (< 768px) — ' + width + 'px';
} else if (width < 1024) {
el.textContent = '📟 Tablet (768–1023px) — ' + width + 'px';
} else if (width < 1400) {
el.textContent = '💻 Desktop (1024–1399px) — ' + width + 'px';
} else {
el.textContent = '🖥️ Large Desktop (≥ 1400px) — ' + width + 'px';
}
}
window.addEventListener('resize', updateBreakpoint);
window.addEventListener('load', updateBreakpoint);
updateBreakpoint();
</script>
</body>
</html>Quick Reference
| Concept | Description | Example |
|---|---|---|
@media | Media query rule | @media screen and (min-width: 768px) |
all | All devices | @media all |
print | Print styles | @media print |
screen | Screen devices | @media screen |
and | Both conditions | screen and (min-width: 768px) |
not | Negation | not (hover: hover) |
only | Legacy browser support | only screen and (min-width: 768px) |
, | OR condition | screen, print |
Common Media Features
| Feature | Description | Example |
|---|---|---|
width | Viewport width | (min-width: 768px) |
height | Viewport height | (min-height: 600px) |
orientation | Portrait/landscape | (orientation: landscape) |
aspect-ratio | Viewport aspect ratio | (aspect-ratio: 16/9) |
resolution | Pixel density | (min-resolution: 2dppx) |
hover | Hover capability | (hover: hover) |
prefers-color-scheme | Dark/light mode | (prefers-color-scheme: dark) |
prefers-reduced-motion | Reduced motion | (prefers-reduced-motion: reduce) |
Best Practices
✅ Do This:
/* Mobile First approach */
/* Base styles for mobile */
.container {
display: block;
padding: 10px;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
display: flex;
padding: 20px;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}❌ Don’t Do This:
/* Don't use too many breakpoints */
@media (min-width: 320px) { }
@media (min-width: 375px) { }
@media (min-width: 414px) { }
@media (min-width: 480px) { }
@media (min-width: 640px) { }
/* Too many — aim for 3-5 major breakpoints */
/* Don't forget the viewport meta tag */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */Pro Tip: Mobile First is the recommended approach — start with styles for the smallest screens and add complexity as the screen gets larger. Use min-width for breakpoints. Don’t forget the viewport meta tag — without it, media queries won’t work correctly on mobile devices! And always respect user preferences like prefers-color-scheme and prefers-reduced-motion for a more accessible experience.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
