CSS Responsive Techniques - Mobile-First Patterns

Responsive CSS techniques for mobile-first design.

Mobile-First Media Queries

/* Base styles for mobile */
.container {
    padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        padding: 3rem;
        max-width: 1200px;
        margin: 0 auto;
    }
}

Container Queries

.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
}

Responsive Images

.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

Flexible Grid

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

Responsive Typography

.text-responsive {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.6;
}

Features

• Mobile-first approach
• Flexible layouts
• Modern CSS features
• Performance optimized