Responsive Design

Code

/* Fluid layout */
img {
    max-width: 100%;
    height: auto;
}

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

/* Responsive grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 1rem;
}

/* Container query */
.card-container {
    container-type: inline-size;
}
@container (min-width: 400px) {
    .card { display: flex; }
    .card img { width: 200px; }
}

/* Viewport units */
.hero {
    height: 100vh;
    padding: 5vh 5vw;
}

/* Responsive nav */
.nav { display: flex; }
@media (max-width: 768px) {
    .nav { flex-direction: column; }
    .nav .hamburger { display: block; }
}

/* Image fit */
.cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

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

Explanation

Responsive design uses relative units, clamp(), auto-fit, container queries, etc. to adapt to different devices.

More CSS Snippets