'How to understand CSS calc with responsive font-size? This code does not seem to accurately reflect max viewport width, thus font-size is too small
Css calc does not seem to be picking up on the max viewport size, and thus my font size is too small (not 1rem ) at the set maximum viewport width of 1400px. No matter what I do with the browser size the font increases in size. I would have thought that at 1400px viewport width the font would display at 1rem and then decrease in size from there, but it's not 1rem at 1400px wide it's showing as smaller, so I'm not sure how to control this as it's not doing what I think it should be doing.
What am I not understanding? How do I get this code to show max font size of 1rem at 1400px width of the browser window, and progressively shrinking to 0.65rem at a viewport size of 375px?
My understanding of the following calc function is as follows: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));. This is from the css-tricks website.
Here's my test code (here's a fiddle if that's easier to see what's going on).
.testok{
font-size: calc(0.65rem + (1 - 0.65) * ((100vw - 375px) / (1400 - 375)));
}
<p class="testok">Le petit chien marron....</p>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
