Mobile Responsiveness

Essential Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag ensures your page displays correctly on mobile devices by:

• Setting viewport width to device width
• Preventing automatic zooming
• Enabling proper responsive behavior

CSS Media Query Structure

/* Mobile styles (default) */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet styles */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .container {
        width: 1200px;
        padding: 20px;
    }
}

Fluid Typography Example

/* Responsive font sizing */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Scale based on screen size */
@media (min-width: 768px) {
    body {
        font-size: 18px;
        line-height: 1.6;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 1.5;
    }
}

Container Query Example

/* Component responds to container size, not viewport */
.card-container {
    container-type: inline-size;
}

@container (min-width: 300px) {
    .card {
        display: flex;
        gap: 1rem;
    }
}

Container queries allow components to respond to their container size rather than viewport size, enabling more modular responsive design.

Responsive Image Implementation

<!-- Resolution switching -->
<img src="image-400.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 768px) 100vw,
            (max-width: 1024px) 50vw,
            33vw"
     alt="Description">

<!-- Art direction -->
<picture>
    <source media="(max-width: 767px)" srcset="mobile-image.jpg">
    <source media="(max-width: 1024px)" srcset="tablet-image.jpg">
    <img src="desktop-image.jpg" alt="Description">
</picture>

Responsive Navigation Example

/* Mobile: Hidden by default */
.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.nav-toggle:checked + .nav-menu {
    display: block;
}

/* Desktop: Always visible */
@media (min-width: 768px) {
    .nav-menu {
        display: flex;
        position: static;
        width: auto;
    }
    
    .nav-toggle {
        display: none;
    }
}

Mobile-Optimized Form Fields

<!-- Triggers numeric keypad -->
<input type="tel" placeholder="Phone number">

<!-- Triggers email keyboard -->
<input type="email" placeholder="Email address">

<!-- Larger touch targets -->
input, select, textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
}

<!-- Better mobile labels -->
<label for="phone">Phone Number</label>
<input id="phone" type="tel" autocomplete="tel">