Kevin Powell - Community•2w ago

Where should I use the clamp() function and what to use for responsive design overall

Just what the title says. When I've discovered the clamp() function, I've been using it everywhere so I can avoid media queries, should I keep doing that? I've been using that for padding, margin, position, everything overall, here is a sample of my code:

#logo {
    font-size: clamp(0.94rem, 1.56vw, 3.75rem);
    color: #fff;
    margin-left: clamp(3.3em,11.35vw,20.44em);
    position:absolute;
}

#navigation{
    font-size: clamp(0.75rem, 1.25vw, 3rem);
    gap: clamp(1.13em,1.88vw, 4.5em);
    position: absolute;
    right: clamp(3.13em, 11.75vw, 28.25em);
}

#logo {
    font-size: clamp(0.94rem, 1.56vw, 3.75rem);
    color: #fff;
    margin-left: clamp(3.3em,11.35vw,20.44em);
    position:absolute;
}

#navigation{
    font-size: clamp(0.75rem, 1.25vw, 3rem);
    gap: clamp(1.13em,1.88vw, 4.5em);
    position: absolute;
    right: clamp(3.13em, 11.75vw, 28.25em);
}

should I keep doing that? Or is there a better practice?

15 Replies

Jochem•2w ago

should you keep avoiding media queries? No font size should also never be defined without a rem component in the middle, so always use 1vw + 1rem (values up to you, but most of the base value should come from rem and not vw using media queries isn't a failure, they're a tool in your toolbox

Piesz•2w ago

K, understood But should I keep using the clamp() function like that (Extending the usage not only to fonts but also to positioning margins and paddings)? Or just use a media query for that

ἔρως•2w ago

that's a big DEPENDS what do you want? a fixed font size? or a dynamic font size?

Piesz•2w ago

Nah I know that I should use that for the font-szie

Jochem•2w ago

Not necessarily you should use it if you want the font size to change by the size of the viewport, but that's not necessarily always what you want

Piesz•2w ago

Why? explain please oh ok .

ἔρως•2w ago

it depends on what you want or need

Jochem•2w ago

there's no yes / no answer to be had here Clamp is a tool you're asking if you should always use a socket wrench, that isn't a yes/no answer either

b1mind•2w ago

I don't think you should be clamping fonts besides large headings Like extra large need to take up most the screen

Piesz•2w ago

Let's say that I want a navigation bar that will dynamically change it's margin on the top and right, and the gap depneding on the viewport width

ἔρως•2w ago

in that case, i would use fixed sizes without media queries unless you need the size to change, then media queries fot the font, what b1mind said makes the most sense

Jochem•2w ago

this sounds like a lot of complication for very little real world benefit if I'm honest if you use it everywhere, everything is going to be a different size and that's bound to cause weird single-device overflow or unwanted wrapping more than most languages, CSS thrives on the KISS principle (Keep It Simple, Stupid)

ἔρως•2w ago

the simpler, usually the better

snxxwyy•2w ago

just a side note, if you're using clamp for the padding/margin of an element because the text to space ratio isn't right on certain viewports (you'd have large text on desktop so spacing that works with that would look too big when the text is smaller on mobile for example) then simply using clamp for the font size and em for the margin/padding would fix the ratio without the extra clamp. I personally wouldn't use it absolutely everywhere but as everyone above me has said, it depends.

ἔρως•2w ago

that is a very good point

Gaming

Programming

Where should I use the clamp() function and what to use for responsive design overall