CSS Breakpoints Tutorial
Master responsive design with CSS media queries and breakpoints
What are CSS Breakpoints?
CSS breakpoints are specific screen widths where your website's layout and styles change to provide an optimal viewing experience across different devices. They are implemented using media queries to apply different CSS rules based on device characteristics.
Why Breakpoints Matter:
- Create responsive designs that work on all devices
- Improve user experience across screen sizes
- Optimize content layout for different contexts
- Ensure readability and usability on all devices
- Follow mobile-first design principles
Common Breakpoint Approaches:
- Device-based breakpoints: Targeting specific device sizes
- Content-based breakpoints: Breaking when content doesn't look right
- Hybrid approach: Combining device and content considerations
- Mobile-first: Starting with mobile styles and enhancing for larger screens
Common Breakpoint Values
Standard Device Breakpoints
Mobile< 640px
Small Tablet640px - 767px
Tablet768px - 1023px
Desktop1024px - 1279px
Large Desktop1280px+
Framework Breakpoints
Bootstrap576, 768, 992, 1200px
Tailwind CSS640, 768, 1024, 1280px
Foundation640, 1024px
Bulma769, 1024, 1216, 1408px
Material-UI600, 960, 1280, 1920px
Media Query Syntax & Types
Basic Media Query Syntax
@media [media-type] and ([media-feature]) {
/* CSS rules */
}
screen
For computer screens, tablets, smartphones
print
For printers
speech
For screenreaders
all
For all media types (default)
Common Media Features
width, min-width, max-width
Viewport width (most common)
height, min-height, max-height
Viewport height
orientation
Portrait or landscape mode
resolution
Pixel density of the device
hover
Whether hover is supported
prefers-color-scheme
Dark or light mode preference
CSS Breakpoints Implementation
Complete Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Breakpoints Tutorial</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--accent-color: #e74c3c;
--warning-color: #f39c12;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
--text-color: #333;
--text-light: #fff;
--spacing: 1rem;
--border-radius: 8px;
--transition: all 0.3s ease;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--light-color);
padding: var(--spacing);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 1.5);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--text-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: min(4vw, 2.5rem);
margin-bottom: calc(var(--spacing) / 2);
}
h2 {
font-size: min(3vw, 1.8rem);
margin: calc(var(--spacing) * 1.5) 0 var(--spacing);
color: var(--dark-color);
padding-bottom: calc(var(--spacing) / 2);
border-bottom: 2px solid var(--primary-color);
}
h3 {
font-size: min(2.5vw, 1.3rem);
margin: var(--spacing) 0 calc(var(--spacing) / 2);
color: var(--primary-color);
}
.example {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing);
margin-bottom: calc(var(--spacing) * 1.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.demo {
border: 2px solid #e9ecef;
border-radius: var(--border-radius);
padding: var(--spacing);
margin: var(--spacing) 0;
background: #f8f9fa;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing);
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: var(--spacing);
border-radius: var(--border-radius);
overflow-x: auto;
margin: var(--spacing) 0;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.9rem;
}
.btn {
display: inline-block;
padding: calc(var(--spacing) / 2) var(--spacing);
background: var(--primary-color);
color: var(--text-light);
border: none;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
font-size: 0.9rem;
margin-right: calc(var(--spacing) / 2);
transition: var(--transition);
}
.btn:hover {
background: #2980b9;
}
.btn-copy {
background: var(--secondary-color);
}
.btn-copy:hover {
background: #27ae60;
}
/* Example 1: Basic Breakpoints */
.basic-breakpoint {
padding: var(--spacing);
background: var(--primary-color);
color: white;
text-align: center;
border-radius: var(--border-radius);
transition: var(--transition);
}
@media (min-width: 768px) {
.basic-breakpoint {
background: var(--secondary-color);
}
}
@media (min-width: 1024px) {
.basic-breakpoint {
background: var(--accent-color);
}
}
/* Example 2: Layout Changes */
.layout-demo {
display: flex;
flex-direction: column;
gap: var(--spacing);
}
.layout-item {
padding: var(--spacing);
background: var(--primary-color);
color: white;
border-radius: var(--border-radius);
text-align: center;
flex: 1;
}
@media (min-width: 768px) {
.layout-demo {
flex-direction: row;
}
.layout-item {
background: var(--secondary-color);
}
}
@media (min-width: 1024px) {
.layout-item {
background: var(--accent-color);
}
}
/* Example 3: Typography Breakpoints */
.responsive-typography {
text-align: center;
padding: var(--spacing);
background: var(--light-color);
border-radius: var(--border-radius);
transition: var(--transition);
}
@media (min-width: 640px) {
.responsive-typography {
font-size: 1.25rem;
}
}
@media (min-width: 768px) {
.responsive-typography {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) {
.responsive-typography {
font-size: 2rem;
}
}
/* Example 4: Navigation Breakpoints */
.nav-demo {
background: var(--dark-color);
border-radius: var(--border-radius);
overflow: hidden;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
display: block;
padding: var(--spacing);
color: white;
cursor: pointer;
text-align: center;
}
.nav-menu {
display: none;
list-style: none;
flex-direction: column;
}
.nav-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-link {
display: block;
padding: var(--spacing);
color: white;
text-decoration: none;
transition: var(--transition);
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
}
.nav-toggle:checked ~ .nav-menu {
display: flex;
}
@media (min-width: 768px) {
.nav-toggle-label {
display: none;
}
.nav-menu {
display: flex;
flex-direction: row;
}
.nav-item {
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-item:last-child {
border-right: none;
}
}
/* Example 5: Grid Breakpoints */
.grid-demo {
display: grid;
gap: var(--spacing);
margin: var(--spacing) 0;
}
.grid-item {
padding: var(--spacing);
background: var(--primary-color);
color: white;
border-radius: var(--border-radius);
text-align: center;
}
@media (min-width: 640px) {
.grid-demo {
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background: var(--secondary-color);
}
}
@media (min-width: 1024px) {
.grid-demo {
grid-template-columns: repeat(4, 1fr);
}
.grid-item {
background: var(--accent-color);
}
}
/* Example 6: Image Breakpoints */
.image-demo {
width: 100%;
height: 200px;
background: var(--primary-color);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
transition: var(--transition);
}
@media (min-width: 768px) {
.image-demo {
height: 300px;
background: var(--secondary-color);
}
}
@media (min-width: 1024px) {
.image-demo {
height: 400px;
background: var(--accent-color);
}
}
/* Example 7: Visibility Breakpoints */
.visibility-demo {
display: flex;
gap: var(--spacing);
flex-wrap: wrap;
}
.visible-mobile {
padding: var(--spacing);
background: var(--primary-color);
color: white;
border-radius: var(--border-radius);
text-align: center;
flex: 1;
}
.visible-tablet {
padding: var(--spacing);
background: var(--secondary-color);
color: white;
border-radius: var(--border-radius);
text-align: center;
flex: 1;
display: none;
}
.visible-desktop {
padding: var(--spacing);
background: var(--accent-color);
color: white;
border-radius: var(--border-radius);
text-align: center;
flex: 1;
display: none;
}
@media (min-width: 768px) {
.visible-mobile {
display: none;
}
.visible-tablet {
display: block;
}
}
@media (min-width: 1024px) {
.visible-tablet {
display: none;
}
.visible-desktop {
display: block;
}
}
/* Example 8: Form Breakpoints */
.form-demo {
display: flex;
flex-direction: column;
gap: var(--spacing);
}
.form-group {
margin-bottom: var(--spacing);
}
.form-label {
display: block;
margin-bottom: calc(var(--spacing) / 4);
font-weight: bold;
}
.form-input {
width: 100%;
padding: calc(var(--spacing) / 2);
border: 1px solid #ddd;
border-radius: calc(var(--border-radius) / 2);
}
.form-button {
padding: calc(var(--spacing) / 2) var(--spacing);
background: var(--primary-color);
color: white;
border: none;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
}
@media (min-width: 768px) {
.form-demo {
flex-direction: row;
flex-wrap: wrap;
}
.form-group {
flex: 1 1 calc(50% - var(--spacing));
}
}
@media (min-width: 1024px) {
.form-group {
flex: 1 1 calc(33.333% - var(--spacing));
}
}
/* Example 9: Complex Breakpoint System */
.complex-system {
padding: var(--spacing);
background: var(--light-color);
border-radius: var(--border-radius);
border: 1px solid #ddd;
transition: var(--transition);
}
.system-title {
font-size: 1.2rem;
margin-bottom: var(--spacing);
color: var(--dark-color);
}
.system-content {
display: grid;
gap: var(--spacing);
}
.system-item {
padding: var(--spacing);
background: white;
border-radius: calc(var(--border-radius) / 2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media (min-width: 640px) {
.complex-system {
padding: calc(var(--spacing) * 1.5);
}
.system-title {
font-size: 1.5rem;
}
.system-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.complex-system {
padding: calc(var(--spacing) * 2);
background: linear-gradient(135deg, var(--light-color) 0%, #ffffff 100%);
}
.system-title {
font-size: 1.8rem;
text-align: center;
}
}
@media (min-width: 1024px) {
.system-content {
grid-template-columns: repeat(3, 1fr);
}
.system-item {
padding: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 1280px) {
.complex-system {
padding: calc(var(--spacing) * 3);
}
.system-title {
font-size: 2.2rem;
}
.system-content {
grid-template-columns: repeat(4, 1fr);
}
}
/* Viewport Size Indicator */
.viewport-size {
position: fixed;
top: 10px;
right: 10px;
background: var(--dark-color);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.8rem;
z-index: 1000;
font-family: monospace;
}
</style>
</head>
<body>
<div class="viewport-size" id="viewportSize">Viewport: <span id="sizeInfo"></span></div>
<div class="container">
<header>
<h1>CSS Breakpoints Tutorial</h1>
<p>Master responsive design with CSS media queries and breakpoints</p>
</header>
<section class="example">
<h2>1. Basic Breakpoints</h2>
<p>Changing styles at different screen sizes using min-width media queries.</p>
<div class="demo">
<div class="basic-breakpoint">
Resize the browser to see color changes
</div>
</div>
<div class="code-block">
.basic-breakpoint {
background: #3498db; /* Mobile first */
}
@media (min-width: 768px) {
.basic-breakpoint {
background: #2ecc71; /* Tablet */
}
}
@media (min-width: 1024px) {
.basic-breakpoint {
background: #e74c3c; /* Desktop */
}
}
</div>
</section>
<section class="example">
<h2>2. Layout Changes</h2>
<p>Changing layout direction from column to row at different breakpoints.</p>
<div class="demo">
<div class="layout-demo">
<div class="layout-item">Item 1</div>
<div class="layout-item">Item 2</div>
<div class="layout-item">Item 3</div>
</div>
</div>
<div class="code-block">
.layout-demo {
display: flex;
flex-direction: column; /* Mobile first */
}
@media (min-width: 768px) {
.layout-demo {
flex-direction: row; /* Tablet and up */
}
}
</div>
</section>
<section class="example">
<h2>3. Responsive Typography</h2>
<p>Increasing font size at different breakpoints for better readability.</p>
<div class="demo">
<div class="responsive-typography">
This text grows with screen size
</div>
</div>
<div class="code-block">
.responsive-typography {
font-size: 1rem; /* Mobile first */
}
@media (min-width: 640px) {
.responsive-typography {
font-size: 1.25rem; /* Small tablets */
}
}
@media (min-width: 768px) {
.responsive-typography {
font-size: 1.5rem; /* Tablets */
}
}
@media (min-width: 1024px) {
.responsive-typography {
font-size: 2rem; /* Desktops */
}
}
</div>
</section>
<section class="example">
<h2>4. Responsive Navigation</h2>
<p>Hamburger menu on mobile, horizontal menu on larger screens.</p>
<div class="demo">
<nav class="nav-demo">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">☰ Menu</label>
<ul class="nav-menu">
<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">Contact</a></li>
</ul>
</nav>
</div>
<div class="code-block">
/* Mobile styles */
.nav-toggle-label {
display: block; /* Show menu toggle */
}
.nav-menu {
display: none; /* Hide menu by default */
}
.nav-toggle:checked ~ .nav-menu {
display: flex; /* Show when checked */
}
/* Desktop styles */
@media (min-width: 768px) {
.nav-toggle-label {
display: none; /* Hide toggle */
}
.nav-menu {
display: flex; /* Show menu */
flex-direction: row;
}
}
</div>
</section>
<section class="example">
<h2>5. Grid Layout Breakpoints</h2>
<p>Changing grid columns at different screen sizes.</p>
<div class="demo">
<div class="grid-demo">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
</div>
</div>
<div class="code-block">
.grid-demo {
display: grid;
gap: 1rem;
}
@media (min-width: 640px) {
.grid-demo {
grid-template-columns: repeat(2, 1fr); /* 2 columns */
}
}
@media (min-width: 1024px) {
.grid-demo {
grid-template-columns: repeat(4, 1fr); /* 4 columns */
}
}
</div>
</section>
<section class="example">
<h2>6. Responsive Images</h2>
<p>Changing image dimensions at different breakpoints.</p>
<div class="demo">
<div class="image-demo">Responsive Image</div>
</div>
<div class="code-block">
.image-demo {
height: 200px; /* Mobile first */
}
@media (min-width: 768px) {
.image-demo {
height: 300px; /* Tablet */
}
}
@media (min-width: 1024px) {
.image-demo {
height: 400px; /* Desktop */
}
}
</div>
</section>
<section class="example">
<h2>7. Conditional Visibility</h2>
<p>Showing/hiding elements at different breakpoints.</p>
<div class="demo">
<div class="visibility-demo">
<div class="visible-mobile">Visible on Mobile</div>
<div class="visible-tablet">Visible on Tablet</div>
<div class="visible-desktop">Visible on Desktop</div>
</div>
</div>
<div class="code-block">
.visible-mobile {
display: block; /* Visible on mobile */
}
.visible-tablet {
display: none; /* Hidden on mobile */
}
.visible-desktop {
display: none; /* Hidden on mobile */
}
@media (min-width: 768px) {
.visible-mobile {
display: none; /* Hidden on tablet */
}
.visible-tablet {
display: block; /* Visible on tablet */
}
}
@media (min-width: 1024px) {
.visible-tablet {
display: none; /* Hidden on desktop */
}
.visible-desktop {
display: block; /* Visible on desktop */
}
}
</div>
</section>
<section class="example">
<h2>8. Responsive Forms</h2>
<p>Adapting form layout at different breakpoints.</p>
<div class="demo">
<form class="form-demo">
<div class="form-group">
<label class="form-label" for="name">Name</label>
<input class="form-input" type="text" id="name">
</div>
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input class="form-input" type="email" id="email">
</div>
<div class="form-group">
<label class="form-label" for="phone">Phone</label>
<input class="form-input" type="tel" id="phone">
</div>
<div class="form-group">
<button class="form-button" type="submit">Submit</button>
</div>
</form>
</div>
<div class="code-block">
.form-demo {
display: flex;
flex-direction: column; /* Mobile: stacked */
}
.form-group {
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.form-demo {
flex-direction: row; /* Tablet: inline */
flex-wrap: wrap;
}
.form-group {
flex: 1 1 calc(50% - 1rem); /* 2 columns */
}
}
@media (min-width: 1024px) {
.form-group {
flex: 1 1 calc(33.333% - 1rem); /* 3 columns */
}
}
</div>
</section>
<section class="example">
<h2>9. Complex Breakpoint System</h2>
<p>A comprehensive example showing multiple breakpoints affecting various properties.</p>
<div class="demo">
<div class="complex-system">
<div class="system-title">Responsive System</div>
<div class="system-content">
<div class="system-item">Feature 1</div>
<div class="system-item">Feature 2</div>
<div class="system-item">Feature 3</div>
<div class="system-item">Feature 4</div>
</div>
</div>
</div>
<div class="code-block">
/* Mobile first styles */
.complex-system {
padding: 1rem;
background: #ecf0f1;
}
.system-content {
display: grid;
gap: 1rem;
}
/* Small tablets */
@media (min-width: 640px) {
.complex-system {
padding: 1.5rem;
}
.system-content {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablets */
@media (min-width: 768px) {
.complex-system {
padding: 2rem;
background: linear-gradient(135deg, #ecf0f1 0%, #ffffff 100%);
}
.system-title {
text-align: center;
}
}
/* Desktops */
@media (min-width: 1024px) {
.system-content {
grid-template-columns: repeat(3, 1fr);
}
.system-item {
padding: 1.5rem;
}
}
/* Large desktops */
@media (min-width: 1280px) {
.complex-system {
padding: 3rem;
}
.system-content {
grid-template-columns: repeat(4, 1fr);
}
}
</div>
</section>
</div>
<script>
// Update viewport size indicator
function updateViewportSize() {
const width = window.innerWidth;
const height = window.innerHeight;
const sizeInfo = document.getElementById('sizeInfo');
if (sizeInfo) {
let breakpoint = 'Mobile';
if (width >= 1280) breakpoint = 'XL Desktop (1280px+)';
else if (width >= 1024) breakpoint = 'Large Desktop (1024px+)';
else if (width >= 768) breakpoint = 'Tablet (768px+)';
else if (width >= 640) breakpoint = 'Small Tablet (640px+)';
else breakpoint = 'Mobile (<640px)';
sizeInfo.textContent = `${width} × ${height}px - ${breakpoint}`;
}
}
// Update on load and resize
updateViewportSize();
window.addEventListener('resize', updateViewportSize);
</script>
</body>
</html>Best Practices & Common Pitfalls
Best Practices
- Use a mobile-first approach
- Choose breakpoints based on content, not devices
- Use em or rem units for more accessible breakpoints
- Keep breakpoints consistent across your project
- Test on real devices, not just browser resizing
- Use CSS custom properties for breakpoint values
- Consider using CSS frameworks for consistency
Common Pitfalls
- Too many or too few breakpoints
- Using pixel units exclusively (not responsive to zoom)
- Testing only in landscape or only in portrait
- Forgetting to test on actual mobile devices
- Creating breakpoints that are too close together
- Not considering touch targets on mobile
- Ignoring performance implications of complex media queries
Mobile-First vs Desktop-First
Mobile-First (Recommended)
/* Base styles for mobile */
.element {
width: 100%;
}
/* Tablet and up */
@media (min-width: 768px) {
.element {
width: 50%;
}
}
Desktop-First (Legacy)
/* Base styles for desktop */
.element {
width: 50%;
}
/* Tablet and down */
@media (max-width: 767px) {
.element {
width: 100%;
}
}
Browser Support & Compatibility
✓
Excellent Browser Support
CSS media queries have excellent support across all modern browsers. Basic media query support started with CSS3 and is now universally supported.
Desktop Browsers
- Chrome 4+ ✓
- Firefox 3.5+ ✓
- Safari 4+ ✓
- Edge 12+ ✓
- Opera 10+ ✓
Mobile Browsers
- iOS Safari 4+ ✓
- Android Browser 2.1+ ✓
- Chrome Mobile ✓
- Firefox Mobile ✓
- Samsung Internet ✓
Legacy Browser Considerations
For very old browsers (IE8 and below) that don't support media queries, consider using polyfills or graceful degradation techniques. However, these browsers have minimal market share today.
Advanced Breakpoint Techniques
CSS Custom Properties for Breakpoints
Use CSS variables to make your breakpoints consistent and easy to maintain:
:root {
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}
@media (min-width: var(--breakpoint-md)) {
.element {
/* Styles for medium screens and up */
}
}
Container Queries (New!)
Container queries allow elements to respond to the size of their container rather than the viewport:
.container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
⚠️ Container queries are a newer CSS feature with good but not universal browser support. Check compatibility before using in production.
Ready to Master CSS Breakpoints?
Experiment with our interactive breakpoints example. Resize your browser window to see how different elements respond at various breakpoints!