Common Responsive Patterns

@media (min-width: 768px)

@media (max-width: 767px)

@media (min-width: 768px) and (max-width: 1023px)

@media (orientation: landscape)

🔹 Responsive Navigation

Mobile-friendly navigation implementation requires strategic @media queries that transform desktop layouts into compact, touch-optimized interfaces. Hamburger menus, off-canvas panels, and priority+ patterns represent common responsive navigation solutions. Performance optimization includes minimizing JavaScript dependencies and using CSS transitions for smooth interactions. Google's mobile-first indexing prioritizes responsive navigation implementations that maintain functionality across all device types while providing excellent Core Web Vitals metrics.

/* Mobile navigation */
.nav {
    display: flex;
    flex-direction: column;
    background: #333;
    padding: 1rem;
}

.nav-item {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid #555;
}

/* Tablet and desktop navigation */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        justify-content: space-around;
        padding: 1rem 2rem;
    }
    
    .nav-item {
        border-bottom: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        transition: background 0.3s ease;
    }
    
    .nav-item:hover {
        background: #555;
    }
}

<nav class="nav">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
</nav>

🔹 Responsive Grid Layout

Responsive CSS Grid Layout creates flexible, multi-dimensional layouts that adapt intelligently to available screen space. Using properties like grid-template-columns with repeat(auto-fit, minmax(min-value, max-value)), developers can build layouts that automatically adjust column counts based on container width. This eliminates the need for multiple media query breakpoints for grid adjustments. Advanced techniques include named grid areas that reposition content for different screen sizes, intrinsic sizing with min-content and max-content, and gap properties for consistent spacing. These grid systems improve visual hierarchy, maintain content relationships across breakpoints, and significantly reduce layout code complexity.

/* Mobile: single column */
.grid {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.grid-item {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    text-align: center;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 2rem;
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Large desktop: 4 columns */
@media (min-width: 1400px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
</div>

🔹 Responsive Typography

Responsive typography scales text appropriately across devices using fluid type techniques and viewport-based units. Modern approaches utilize CSS clamp() function: font-size: clamp(1rem, 2.5vw, 2rem) to create fluid scaling between minimum and maximum values. This ensures optimal readability without excessive media queries. Additional considerations include line-height adjustments for different screen sizes, variable fonts for performance optimization, and proper heading hierarchy maintenance across breakpoints. These typographic systems improve reading experience, maintain brand consistency, and enhance accessibility by ensuring comfortable reading sizes across diverse devices from mobile phones to large desktop monitors.

/* Base typography for mobile */
.responsive-text {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.responsive-heading {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Tablet typography */
@media (min-width: 768px) {
    .responsive-text {
        font-size: 1.125rem;
        line-height: 1.6;
    }
    
    .responsive-heading {
        font-size: 2rem;
    }
}

/* Desktop typography */
@media (min-width: 1024px) {
    .responsive-text {
        font-size: 1.25rem;
        line-height: 1.7;
    }
    
    .responsive-heading {
        font-size: 2.5rem;
    }
}

<h1 class="responsive-heading">Responsive Heading</h1>
<p class="responsive-text">This text scales beautifully across all device sizes, ensuring optimal readability on mobile, tablet, and desktop screens.</p>

🔹 Container Queries (Modern)

Container queries revolutionize responsive design by allowing components to adapt based on their own container’s size, not just the viewport. Using the @container rule, you can define styles that trigger when a parent element reaches specific dimensions. This enables truly modular, reusable components—like cards, sidebars, or galleries—that work correctly in any layout context. First, designate a containment context with container‑type and optionally container‑name. Then write queries such as @container (min‑width: 400px) { ... }. Container queries solve long‑standing challenges in component‑based design, offering greater flexibility and maintainability.

/* Container query setup */
.card-container {
    container-type: inline-size;
    container-name: card;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Container query: when container is wider than 400px */
@container card (min-width: 400px) {
    .card-content {
        flex-direction: row;
        align-items: center;
    }
    
    .card-image {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
    }
}

<div class="card-container">
    <div class="card">
        <div class="card-content">
            <div class="card-image">📷</div>
            <div>
                <h3>Card Title</h3>
                <p>This card layout changes based on its container size, not the viewport.</p>
            </div>
        </div>
    </div>
</div>

🔹 Print Styles

Print style optimization ensures web content translates effectively to physical media through targeted CSS adjustments. Using @media print media queries, developers can hide non-essential elements like navigation and advertisements, adjust colors for monochrome printing, and set appropriate page margins. Additional considerations include controlling page breaks with page-break-before and page-break-inside properties, expanding compressed URLs to full addresses using content property with attribute selectors, and ensuring sufficient color contrast for printed versions. These optimizations reduce ink consumption, improve printed document readability, and provide users with professional-quality printouts of web content.

/* Print-specific styles */
@media print {
    /* Hide navigation and interactive elements */
    .nav, .sidebar, .footer {
        display: none;
    }
    
    /* Optimize typography for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: black;
        background: white;
    }
    
    /* Ensure links are visible */
    a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
    
    /* Page breaks */
    .page-break {
        page-break-before: always;
    }
    
    /* Avoid breaking inside elements */
    .no-break {
        page-break-inside: avoid;
    }
}