min(), max(), and clamp() are CSS magic!
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about responsive or screen-width-based font sizing, as a clear walkthrough of clamp() and related functions.
Recommended by 2 people across 2 different months, 2020 to 2021.
What it is
Kevin Powell explains the CSS min(), max() and clamp() functions and shows how clamp() lets you build fluid, responsive typography in a single line of CSS. He also covers using feature queries as a fallback while Safari lacked support.
What people said
Strong rec David Boroš · 2020-06 · Stack Overflow · on “Recommended font size for certain screen width”
Font sizes should never go under 16px. It will make life harder for older ones and people with eye problems. You don't need to use those complicated calculations. Instead, you can use min() , max() or clamp() Beware : These functions are relatively new (especially clamp() ). Check this link out [LINK] to see browser support. min() Lets you to choose minimum and recommended font-size: min(18px, 2vw) /* It will use minimum of those two */ max() chooses between two values and uses bigger one: max(18px, 2vw) /* If 2wv becomes smaller than 18px, it will not use it */ clamp() Is combination of those two. You can choose minimum, regular and maximum font value: clamp(18px, 2vw, 50px) /* If 2wv becom
Recommends Moritz Valentin · 2020-12 · Stack Overflow · on “Change SASS variables based on screen width”
For dynamic changing font sizes you could use the css clamp(min value, dynamic unit, max value) function. [Kevin Powell did a nice Video on this][1] [this video] a sass way to further edit this function would be to set the fontsize with a clamp fuction and put in variables. /*scss*/ @mixin dynamicFontSize ($a) { font-size: clamp(10px * $a, 2vw * $a, 20px * $a); } @include dynamicFontSize (2); /*or*/ @include dynamicFontSize (0.7); for this soution you have to tinker a bit with the units but when you got it its awesome.
Cites BDB88 · 2021-04 · Stack Overflow · on “HTML/CSS - Adjust font-size when going between desktop and mobile”
First up you need to make sure you understand the different values css offer us [LINK] so you can get a better idea of when to use each one. The correct way to solve this would be for you to set up a @media query [LINK] in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller. I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works [LINK] , as for rem it is always based on the root font size so it's more predictable [LINK] , @media screen and (max-width: 600px) { .title { font-size: 2rem; } A more modern approach and a bit easier but sometimes cha