css math functions simplifier

1:root {  font-size: 18px; /* default below 600px */}@media (min-width: 600px) {  :root {    font-size: 3vw;  }}

1Limit font scaling with calc() permalink
2If you would like set an exact minimum font-size in pixels you can use calc().
3
4:root {
5  font-size: calc(16px + 3vw);
6}

1Viewport units:	1vw	2vw	3vw	4vw	5vw
2Viewport size	font-size in pixels
3400px	4px	8px	12px	16px	20px
4500px	5px	10px	15px	20px	25px
5600px	6px	12px	18px	24px	30px
6700px	7px	14px	21px	28px	35px
7800px	8px	16px	24px	32px	40px
8900px	9px	18px	27px	36px	45px
91000px	10px	20px	30px	40px	50px
101100px	11px	22px	33px	44px	55px
111200px	12px	24px	36px	48px	60px

1Limit font scaling with media queries permalink
2You can prevent the text from scaling below a specific threshold simply by using a media query and only applying viewport units above a certain device resolution.
3
4:root {
5  font-size: 18px; /* default below 600px */
6}
7@media (min-width: 600px) {
8  :root {
9    font-size: 3vw;
10  }
11}
12We can also stop scaling above a specific font-size, but for this we need to first work out what the viewport size will be at the font-size we want to stop scaling. For that we need a bit of maths:
13
14font-size / ( number of viewport units / 100 )
15Eg. 24 / ( 3 / 100 ) = 800px
16With that result just set another media query to change the root font-size back to a fixed unit.
17
18... @media (min-width: 800px) {
19  :root {
20    font-size: 24px; /*above 800px */
21  }
22}
23The calculations are not that hard but I find it easier to look at a simple table. This helps me visualise the change in font-size across different resolutions.
24
25Viewport units:	1vw	2vw	3vw	4vw	5vw
26Viewport size	font-size in pixels
27400px	4px	8px	12px	16px	20px
28500px	5px	10px	15px	20px	25px
29600px	6px	12px	18px	24px	30px
30700px	7px	14px	21px	28px	35px
31800px	8px	16px	24px	32px	40px
32900px	9px	18px	27px	36px	45px
331000px	10px	20px	30px	40px	50px
34Looking at the table you can see there are many limitations. We have little control over the rate at which viewport units change and we are confined to the options available in the table.

1:root {  font-size: calc(16px + 3vw);}

1.my-element {
2    width: calc(50% - 10rem);
3}<div class="open_grepper_editor" title="Edit & Save To Grepper"></div>