CSS Media Queries
Media queries are a CSS feature that lets you apply different styles based on device characteristics — such as screen width, orientation, resolution, or media type. They are the main foundation of responsive design.
With media queries, you can create a single stylesheet that automatically adapts its appearance on mobile, tablet, desktop, and other devices without needing separate stylesheets.
The main components:
- @media — the at-rule that marks a conditional CSS block
- media type — the type of device:
all,screen,print - media features — specific conditions:
min-width,max-width,orientation, etc. - Breakpoints — the screen measurement points where styles change
Code Example
<!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</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f2f5;
color: #333;
}
/* ===== Navbar Responsive ===== */
.navbar {
background: #1a1a2e;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.navbar-brand {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
.navbar-brand span {
color: #667eea;
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
color: #ccc;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s;
}
.nav-links a:hover {
color: #667eea;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 5px;
}
.hamburger span {
width: 25px;
height: 3px;
background: white;
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
/* ===== Container ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
/* ===== Section 1: Breakpoints Table ===== */
.breakpoint-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
margin-bottom: 50px;
}
.breakpoint-table th,
.breakpoint-table td {
padding: 14px 20px;
text-align: left;
border-bottom: 1px solid #eee;
}
.breakpoint-table th {
background: #1a1a2e;
color: white;
font-weight: 600;
}
.breakpoint-table td:first-child {
font-weight: 600;
color: #667eea;
}
.breakpoint-table tr:last-child td {
border-bottom: none;
}
/* ===== Section 2: Responsive Grid ===== */
.section-title {
text-align: center;
font-size: 1.8rem;
color: #1a1a2e;
margin-bottom: 10px;
}
.section-subtitle {
text-align: center;
color: #888;
margin-bottom: 30px;
}
.responsive-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.grid-card {
background: white;
border-radius: 12px;
padding: 25px 20px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
transition: transform 0.3s, box-shadow 0.3s;
}
.grid-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.grid-card-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.grid-card h3 {
color: #1a1a2e;
margin-bottom: 8px;
font-size: 1rem;
}
.grid-card p {
color: #666;
font-size: 0.85rem;
line-height: 1.5;
}
/* ===== Section 3: Hide/Show Elements ===== */
.visibility-demo {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
margin-bottom: 50px;
}
.visibility-box {
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
margin-bottom: 10px;
}
.mobile-only {
background: #e8f5e9;
color: #2e7d32;
border: 2px solid #a5d6a7;
}
.tablet-only {
background: #e3f2fd;
color: #1565c0;
border: 2px solid #90caf9;
}
.desktop-only {
background: #fce4ec;
color: #c62828;
border: 2px solid #ef9a9a;
}
.always-visible {
background: #f3e5f5;
color: #6a1b9a;
border: 2px solid #ce93d8;
}
/* ===== Section 4: Typography Scale ===== */
.typography-demo {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
margin-bottom: 50px;
}
.type-heading {
font-size: 2.5rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 10px;
}
.type-subheading {
font-size: 1.5rem;
color: #667eea;
margin-bottom: 15px;
}
.type-body {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 15px;
}
.type-small {
font-size: 0.875rem;
color: #888;
}
/* ===== Section 5: Layout Shift ===== */
.layout-demo {
display: flex;
gap: 30px;
margin-bottom: 50px;
}
.layout-sidebar {
flex: 0 0 250px;
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.layout-sidebar h3 {
color: #1a1a2e;
margin-bottom: 15px;
font-size: 1.1rem;
}
.sidebar-item {
padding: 10px 0;
border-bottom: 1px solid #eee;
color: #555;
font-size: 0.9rem;
}
.sidebar-item:last-child {
border-bottom: none;
}
.layout-main {
flex: 1;
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.layout-main h2 {
color: #1a1a2e;
margin-bottom: 15px;
}
.layout-main p {
color: #555;
line-height: 1.8;
margin-bottom: 15px;
}
/* ===== Section 6: Orientation ===== */
.orientation-demo {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
text-align: center;
}
.orientation-indicator {
padding: 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1.2rem;
}
.orient-landscape {
background: #e8f5e9;
color: #2e7d32;
}
.orient-portrait {
background: #e3f2fd;
color: #1565c0;
}
/* =============================
MEDIA QUERIES
============================= */
/* Tablet: max-width 768px */
@media screen and (max-width: 768px) {
.nav-links {
display: none;
}
.hamburger {
display: flex;
}
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
.layout-demo {
flex-direction: column;
}
.layout-sidebar {
flex: none;
}
.type-heading {
font-size: 1.8rem;
}
.type-subheading {
font-size: 1.2rem;
}
}
/* Mobile: max-width 480px */
@media screen and (max-width: 480px) {
.responsive-grid {
grid-template-columns: 1fr;
}
.type-heading {
font-size: 1.5rem;
}
.type-subheading {
font-size: 1rem;
}
.type-body {
font-size: 0.9rem;
}
.breakpoint-table {
font-size: 0.85rem;
}
.breakpoint-table th,
.breakpoint-table td {
padding: 10px 12px;
}
}
/* Desktop: min-width 1200px */
@media screen and (min-width: 1200px) {
.container {
max-width: 1100px;
}
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Print styles */
@media print {
.navbar {
display: none;
}
body {
background: white;
color: black;
}
.grid-card,
.layout-sidebar {
box-shadow: none;
border: 1px solid #ccc;
}
}
/* Orientation */
@media (orientation: landscape) {
.orient-landscape { display: block; }
.orient-portrait { display: none; }
}
@media (orientation: portrait) {
.orient-landscape { display: none; }
.orient-portrait { display: block; }
}
/* High resolution */
@media (min-resolution: 2dppx) {
.retina-note {
display: block;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">Skill<span>versitas</span></div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</nav>
<div class="container">
<h1 class="section-title">CSS Media Queries</h1>
<p class="section-subtitle">Resize the browser to see the layout change</p>
<h2 class="section-title" style="font-size:1.3rem; margin-bottom:20px;">Breakpoints Umum</h2>
<table class="breakpoint-table">
<thead>
<tr>
<th>Device</th>
<th>Breakpoint</th>
<th>Media Query</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile</td>
<td>≤ 480px</td>
<td>max-width: 480px</td>
</tr>
<tr>
<td>Tablet</td>
<td>≤ 768px</td>
<td>max-width: 768px</td>
</tr>
<tr>
<td>Laptop</td>
<td>≤ 1024px</td>
<td>max-width: 1024px</td>
</tr>
<tr>
<td>Desktop</td>
<td>≤ 1200px</td>
<td>max-width: 1200px</td>
</tr>
<tr>
<td>Large Desktop</td>
<td>> 1200px</td>
<td>min-width: 1201px</td>
</tr>
</tbody>
</table>
<h2 class="section-title" style="font-size:1.3rem; margin-bottom:20px;">Responsive Grid</h2>
<div class="responsive-grid">
<div class="grid-card">
<div class="grid-card-icon">📱</div>
<h3>Mobile First</h3>
<p>Design starts from mobile and scales up to large screens</p>
</div>
<div class="grid-card">
<div class="grid-card-icon">💻</div>
<h3>Desktop First</h3>
<p>Design starts from desktop and adapts down to small screens</p>
</div>
<div class="grid-card">
<div class="grid-card-icon">📐</div>
<h3>Fluid Layout</h3>
<p>A grid that adapts automatically</p>
</div>
<div class="grid-card">
<div class="grid-card-icon">🖼️</div>
<h3>Responsive Images</h3>
<p>Images that adapt to the container size</p>
</div>
</div>
<h2 class="section-title" style="font-size:1.3rem; margin-bottom:20px;">Hide/Show Elements</h2>
<div class="visibility-demo">
<div class="visibility-box mobile-only">
📱 Only visible on MOBILE (≤480px)
</div>
<div class="visibility-box tablet-only">
💻 Only visible on TABLET (≤768px)
</div>
<div class="visibility-box desktop-only">
🖥️ Only visible on DESKTOP (>1024px)
</div>
<div class="visibility-box always-visible">
✅ Always visible on all screen sizes
</div>
</div>
<h2 class="section-title" style="font-size:1.3rem; margin-bottom:20px;">Typography Scale</h2>
<div class="typography-demo">
<h1 class="type-heading">Main Heading</h1>
<h2 class="type-subheading">Subheading Section</h2>
<p class="type-body">
This paragraph uses a different font size at each breakpoint.
On mobile, the font shrinks for readability on small screens.
On desktop, the font is larger for comfortable reading on wide screens.
</p>
<p class="type-small">This is small text that always has a consistent size.</p>
</div>
<h2 class="section-title" style="font-size:1.3rem; margin-bottom:20px;">Layout: Sidebar + Main</h2>
<div class="layout-demo">
<aside class="layout-sidebar">
<h3>Sidebar</h3>
<div class="sidebar-item">CSS Basics</div>
<div class="sidebar-item">Box Model</div>
<div class="sidebar-item">Flexbox</div>
<div class="sidebar-item">Grid</div>
<div class="sidebar-item">Media Queries</div>
</aside>
<main class="layout-main">
<h2>Main Content</h2>
<p>
This layout displays the sidebar next to the main content on desktop.
On tablet and mobile, the sidebar moves above the main content.
This is a very common responsive layout pattern.
</p>
<p>
Notice how the layout changes as you resize the browser.
The transition from multi-column to single-column happens at the 768px breakpoint.
</p>
</main>
</div>
<h2 class="section-title" style="font-size:1.3rem; margin-bottom:20px;">Orientation</h2>
<div class="orientation-demo">
<div class="orientation-indicator orient-landscape">
🖥️ Landscape Mode (Horizontal)
</div>
<div class="orientation-indicator orient-portrait">
📱 Portrait Mode (Vertical)
</div>
</div>
</div>
</body>
</html>
Code Explanation
@media Syntax
A media query is written using the @media at-rule, followed by the media type and the conditional feature in parentheses:
@media media-type and (media-feature: value) {
/* CSS rules */
}
You can combine multiple conditions using and, and use not and a comma (,) for OR.
/* AND combination */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* tablet only */
}
/* NOT */
@media not print {
/* everything except print */
}
/* OR (comma) */
@media (max-width: 480px), (orientation: portrait) {
/* mobile or portrait */
}
Media Types
- all — all media types (default)
- screen — digital displays (monitor, tablet, smartphone)
- print — print mode
@media screen { /* screens only */ }
@media print { /* print only */ }
Media Features
The most commonly used media features:
/* Screen width */
@media (min-width: 768px) {} /* minimum width 768px */
@media (max-width: 768px) {} /* maximum width 768px */
/* Orientation */
@media (orientation: landscape) {} /* horizontal */
@media (orientation: portrait) {} /* vertical */
/* Aspect ratio */
@media (aspect-ratio: 16/9) {} /* widescreen display */
/* Resolution */
@media (min-resolution: 2dppx) {} /* Retina/high-DPI */
Common Breakpoints
Breakpoints are measurement points where the layout changes. Popular breakpoints:
- 480px — mobile landscape / large phone
- 768px — tablet portrait
- 1024px — tablet landscape / small laptop
- 1200px — desktop
Mobile-First vs Desktop-First
Mobile-first uses min-width — base styles for mobile, with additions for larger screens:
/* Default: mobile */
.container { padding: 15px; }
/* Add for tablet */
@media (min-width: 768px) {
.container { padding: 30px; }
}
/* Add for desktop */
@media (min-width: 1200px) {
.container { padding: 50px; }
}
Desktop-first uses max-width — base styles for desktop, with reductions for smaller screens:
/* Default: desktop */
.container { padding: 50px; }
/* Reduce for tablet */
@media (max-width: 1024px) {
.container { padding: 30px; }
}
/* Reduce for mobile */
@media (max-width: 480px) {
.container { padding: 15px; }
}
Hiding/Showing Elements
/* Hide on mobile */
@media (max-width: 480px) {
.sidebar { display: none; }
}
/* Show only on desktop */
.desktop-only { display: none; }
@media (min-width: 1024px) {
.desktop-only { display: block; }
}
Print Styles
The print media query lets you adjust the appearance when a document is printed:
@media print {
.navbar { display: none; }
.sidebar { display: none; }
body { font-size: 12pt; color: black; }
}
Everyday Use Cases
1. Navbar Responsive
A navbar with a horizontal menu on desktop that becomes a hamburger button on mobile:
.nav-links { display: flex; gap: 20px; }
.hamburger { display: none; }
@media (max-width: 768px) {
.nav-links { display: none; }
.hamburger { display: flex; }
}
2. E-commerce Product Grid
A product grid whose column count changes based on screen size:
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.product-grid { grid-template-columns: 1fr; }
}
3. Responsive Typography
Fonts that adapt to screen size for reading comfort:
body { font-size: 16px; }
@media (max-width: 768px) {
body { font-size: 14px; }
}
@media (max-width: 480px) {
body { font-size: 13px; }
}
4. Sidebar Collapse
A sidebar that collapses into a drawer on mobile:
.layout { display: flex; }
.sidebar { width: 250px; }
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { width: 100%; }
}
5. Touch Target Size
Increasing button size on mobile for a more comfortable touch target:
.button { padding: 8px 16px; }
@media (max-width: 768px) {
.button { padding: 14px 24px; min-height: 44px; }
}
Conclusion
Media queries are the main CSS tool for responsive design. With @media, you can apply different styles based on screen width, orientation, media type, and other device characteristics. The mobile-first pattern uses min-width and starts styling from a mobile base, while desktop-first uses max-width. Common breakpoints: 480px (mobile), 768px (tablet), 1024px (laptop), 1200px (desktop). Media queries are also useful for print styles, hiding/showing elements, and responsive typography.