Example 1 featuring two media queries

#

Suppose a

needs to be 90% wide below desktop breakpoint and 40% above that. Because you practice mobile-first approach, you start with:

div {
    width: 90%;
}

and for desktop you add:

@media (min-width: 1024px) {
    div {
        width: 40%;
    }
}

You want to gradually transition between these two values so you reserve, let’s say, the 900px – 1024px range to smooth this out. You add another media query with the magic 🪄 calc() value that you generate using the responsify form below and you’re done! 🎉

@media (min-width: 900px) and (max-width: 1023px) {
    div {
        width: calc(3716.129px - 322.903%); /* https://responsify.dev - parent lower bound: 900px; parent upper bound: 1024px; element lower bound: 90%; element upper bound: 40%; */
    }
}

Note the comment that accompanies calc() value. Preserving input values makes it easier to maintain the code.

The comment also includes https://responsify.dev both as a reference for future maintainers and as a unique string you can match against when tracking down responsified values.

Without responsify:

With responsify:

Example 2 featuring max-width media query

Example 2 featuring max-width media query

#

You want the ‘s padding to increase from 10px to 50px, and have it stay at 50px once it hits the desktop breakpoint. For desktop and above you start off with:

body {
    padding: 50px;
}

and for below desktop you add:

@media (max-width: 1023px) {
    body {
        padding: calc(-8.182px + 5.682vw); /* https://responsify.dev - viewport lower bound: 320px; viewport upper bound: 1024px; element lower bound: 10px; element upper bound: 50px; */
    }
}

I’m not a fan of using a max-width media query because it smells of a desktop-first approach 👎, but I’ve included it here for completeness’ sake.

Example 3 featuring max-height

Example 3 featuring max-height

#

You want the

‘s height to increase from 40px to 90px, and have it stay at 90px once it hits the desktop breakpoint.

header {
    height: calc(17.273px + 7.102vw); /* https://responsify.dev - viewport lower bound: 320px; viewport upper bound: 1024px; element lower bound: 40px; element upper bound: 90px; */
    max-height: 90px;
}

Without the max-height the

would continue to grow in height with increase in viewport width. This approach removes the need for a media query 👍, but is limited to width and height as no other property has a corresponding max-width and max-height. 👎

Example 4 featuring clamp()

Example 4 featuring clamp()

#

You want the

‘s margin-top to be 20px below tablet breakpoint, 200px above desktop breakpoint, and increase from 2.6vw at tablet breakpoint (0.026 * 768px ≅ 20px) to 19.5vw at desktop breakpoint (0.195 * 1024px ≅ 200px).

footer {
    margin-top: clamp(20px, calc(-515.482px + 69.87vw), 200px); /* https://responsify.dev - viewport lower bound: 768px; viewport upper bound: 1024px; element lower bound: 2.75vw; element upper bound: 19.53vw; */
}

Responsify + clamp() is a powerful combination 💪 that allows you to mix and match units, something you can’t do with responsify alone.

Example 5 featuring ch and min()

Example 5 featuring ch and min()

#

You want the ‘s border-width to increase from 1ch to 2ch, and have it stay at 2ch once it hits the desktop breakpoint. In this example let’s say that the average character width is 13.65px.

button {
    border-width: min(calc(0.545ch + 1.939vw), 2ch); /* https://responsify.dev - viewport lower bound: 320px; viewport upper bound: 1024px; element lower bound: 1ch; element upper bound: 2ch; "ch" width in pixels: 13.65; */
}

By using min() you can do away with media query and you’re not limited to width and height like in Example 3. 💯