Kevin Powell - Community•5mo 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•5mo 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

PieszOP•5mo 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

ἔρως•5mo ago

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

PieszOP•5mo ago

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

Jochem•5mo 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

PieszOP•5mo ago

Why? explain please oh ok .

ἔρως•5mo ago

it depends on what you want or need

Jochem•5mo 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•5mo ago

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

PieszOP•5mo 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

ἔρως•5mo 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•5mo 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)

ἔρως•5mo ago

the simpler, usually the better

snxxwyy•5mo 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.

ἔρως•5mo ago

that is a very good point

Gaming

Programming

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