CSS Media Queries
Creating responsive designs for all devices
📱 What are CSS Media Queries?
Media queries allow you to apply CSS styles based on device characteristics like screen size, orientation, or resolution. They're essential for creating responsive websites.
/* Basic media query for mobile devices */
@media (max-width: 768px) {
.container {
padding: 10px;
font-size: 14px;
}
.sidebar {
display: none;
}
}
/* Media query for tablets */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
max-width: 750px;
}
}
/* Media query for desktop */
@media (min-width: 1025px) {
.container {
max-width: 1200px;
}
}
Output:
📱 Resize your browser to see responsive changes
Current view adapts to screen size
Media Query Features
Width Queries
Target specific screen widths
@media (max-width: 600px) {
/* Mobile styles */
}Orientation
Detect portrait or landscape
@media (orientation: landscape) {
/* Landscape styles */
}Device Type
Target specific media types
@media screen and (min-width: 1200px) {
/* Large screen styles */
}Resolution
Target high-DPI displays
@media (min-resolution: 2dppx) {
/* Retina display styles */
}🔹 Modern Responsive Breakpoints
Modern responsive breakpoints utilize device-agnostic approaches rather than specific device sizes for future-proof designs. Instead of targeting specific pixel values for particular devices, contemporary breakpoints focus on content needs using min-width media queries like @media (min-width: 768px). This approach ensures designs adapt to any screen size, accommodating new devices with different dimensions. Essential breakpoints typically include mobile (0-767px), tablet (768-1023px), laptop (1024-1439px), and desktop (1440px+). Additional considerations include container queries for component-level responsiveness, reduced motion preferences for accessibility, and dark mode adaptations that work across all breakpoints for consistent user experience.
/* Mobile First Approach - Recommended */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.responsive-grid {
grid-template-columns: 1fr;
gap: 10px;
padding: 15px;
}
.responsive-text {
font-size: 14px;
line-height: 1.4;
}
.hide-mobile {
display: none;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
}
.responsive-text {
font-size: 16px;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 30px;
}
.responsive-text {
font-size: 18px;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
gap: 25px;
max-width: 1200px;
margin: 0 auto;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.responsive-grid {
gap: 30px;
padding: 40px;
}
.responsive-text {
font-size: 20px;
}
}
Output:
Grid adapts from 1 column (mobile) to 4 columns (desktop)
🔹 Advanced Media Query Techniques
Advanced media query techniques extend beyond viewport dimensions to include device capabilities and user preferences. Modern CSS supports media queries for pointer type (pointer: coarse), aspect ratio (aspect-ratio: 16/9), color scheme preference (prefers-color-scheme: dark), and reduced motion (prefers-reduced-motion). These capabilities enable truly responsive designs that adapt not just to screen size but also to user needs and device capabilities. For example, touch devices can receive larger touch targets while mouse devices get more compact layouts. These advanced techniques significantly improve accessibility, user satisfaction, and overall experience quality across diverse browsing environments and user needs.
/* Container Queries (Modern browsers) */
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}
/* Preference-based queries */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Hover capability detection */
@media (hover: hover) {
.button:hover {
background-color: #2563eb;
transform: translateY(-2px);
}
}
/* Print styles */
@media print {
.no-print {
display: none;
}
body {
font-size: 12pt;
color: black;
background: white;
}
}
/* Combining multiple conditions */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.tablet-landscape {
display: block;
}
}