Responsive Design and Modern Techniques

Responsive Design - Building for All Devices

Responsive design means creating websites that work beautifully on all devices: phones, tablets, laptops, and large monitors. It's no longer optional—it's essential for modern web development.

Mobile-First Approach

Start with styles for mobile, then enhance for larger screens:

/* Mobile first - base styles for small screens */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media (min-width: 768px) {
    .container {
        width: 90%;
        margin: 0 auto;
        padding: 20px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

Breakpoints (Common Screen Sizes)

/* Mobile */
@media (max-width: 480px) { }

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) { }

/* Small Desktop */
@media (min-width: 769px) and (max-width: 1024px) { }

/* Large Desktop */
@media (min-width: 1025px) { }

Fluid Typography (Responsive Font Sizes)

Automatically scale font sizes based on viewport:

/* Fixed approach - not ideal */
p {
    font-size: 14px;  /* Too small on mobile, doesn't use large screen space */
}

/* Fluid approach - responsive */
p {
    font-size: clamp(14px, 2.5vw, 18px);
    /* Min: 14px, preferred: 2.5% of viewport width, max: 18px */
}

h1 {
    font-size: clamp(24px, 5vw, 48px);
}

Fluid Spacing

/* Automatically scale spacing */
.section {
    padding: clamp(20px, 5vw, 60px);  /* Responsive padding */
    margin-bottom: clamp(20px, 4vw, 50px);
}

prefers-color-scheme - Dark Mode Support

Detect user's system theme preference and apply appropriate styles:

/* Light mode (default) */
body {
    background-color: white;
    color: #333;
}

button {
    background-color: #007bff;
    color: white;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e9ecef;
    }
    
    button {
        background-color: #0056b3;
        color: white;
    }
}

prefers-reduced-motion - Accessibility

Respect users who prefer less motion (accessibility feature):

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Container Queries (Modern Layout)

Style elements based on their container size, not viewport size:

.card-container {
    container-type: inline-size;  /* Enable container queries */
}

.card {
    font-size: 16px;
}

/* When container is wider than 400px */
@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-size: 14px;
    }
}

Aspect Ratio (Maintain Proportions)

Keep elements at a specific width-to-height ratio:

/* Video container maintains 16:9 ratio */
.video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Image thumbnail */
.thumbnail {
    aspect-ratio: 1;  /* Square */
    width: 200px;
    object-fit: cover;
}

Real Example: Responsive Card Layout

<div class="cards">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

<style>
.cards {
    display: grid;
    gap: 20px;
    
    /* Mobile: 1 column */
    grid-template-columns: 1fr;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    aspect-ratio: 4 / 5;
    font-size: clamp(14px, 2vw, 16px);
}

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

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .cards {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }
    
    .card {
        font-size: 16px;
    }
}
</style>

Image Optimization for Responsive Design

/* Use srcset to serve different image sizes */
<img
    src="image-small.jpg"
    srcset="image-small.jpg 480w,
            image-medium.jpg 768w,
            image-large.jpg 1200w"
    sizes="(max-width: 480px) 100vw,
           (max-width: 768px) 90vw,
           1200px"
    alt="Description"
>

Modern CSS Features

:has() Selector (Parent Selector)

/* Style card if it has a highlighted element inside */
.card:has(.highlight) {
    border: 2px solid gold;
}

/* Style button if it has focus */
.form:has(input:focus) {
    outline: 2px solid blue;
}

Subgrid (Align Child Grid Items)

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.child {
    display: grid;
    grid-template-columns: subgrid;  /* Align with parent columns */
}

gap in Flexbox (Modern Support)

.flex-container {
    display: flex;
    gap: 20px;  /* Works in Flexbox and Grid */
}

Print Styles

Optimize CSS for printing:

@media print {
    /* Hide navigation when printing */
    nav {
        display: none;
    }
    
    /* Print whole page width */
    .container {
        width: 100%;
    }
    
    /* Avoid page breaks inside elements */
    .card {
        page-break-inside: avoid;
    }
    
    /* Change colors for better printing */
    body {
        color: black;
        background: white;
    }
}

Viewport Meta Tag (Essential for Mobile)

<!-- Add to HTML head for proper mobile rendering -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Testing Responsive Design

• Use browser DevTools responsive mode
• Test on real devices if possible
• Test common breakpoints: 320px, 480px, 768px, 1024px, 1440px
• Use tools like BrowserStack for device testing

Summary

You now understand:

• Mobile-first responsive design approach
• Media queries for different screen sizes
• Fluid typography and spacing with clamp()
• prefers-color-scheme for dark mode
• Container queries for component-based responsive design
• Modern CSS features like :has(), subgrid, aspect-ratio
• Testing and optimization techniques