Piesz Posts - Answer Overflow

Piesz

•Created by Piesz on 6/25/2024 in #front-end

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?

31 replies

KPCKevin Powell - Community

•Created by Piesz on 6/23/2024 in #front-end

What is the best practice for responsive font resizing?

So, as far as i know I should use the rem unit for fonts to not interfere with users preferences. But what should I use for dynamic font resizing? Like there will be a difference between the size of the font on desktop and on a mobile phone. AI suggested to do something like this: font-size: calc(! * @) Where: ! - default size like 1.5rem etc. @ - scale factor determined by the vw unit. Something like 0.5vw etc. Like, I tried that and it for sure works, but is it a good method ?

11 replies

KPCKevin Powell - Community

•Created by Piesz on 6/22/2024 in #front-end

Can't seem to understand the CSS em unit and the why should I use it for padding and margin

Basically what the title says, yes, I've watched Kevin's video about it, yes, I've watched the webdevsimplified video on it; but still I can not understand this. Also why should I use it over percentages ? Please explain it to me using simple examples, do not overcomplicate things

45 replies

Gaming

Programming