css math functions simplifier
:root { font-size: calc(16px + 3vw);}css math functions simplifier
:root { font-size: calc(16px + 3vw);}css math functions simplifier
.my-element {
width: calc(50% - 10rem);
}<div class="open_grepper_editor" title="Edit & Save To Grepper"></div>css math functions simplifier
:root { font-size: 18px; /* default below 600px */}@media (min-width: 600px) { :root { font-size: 3vw; }}css math functions simplifier
Limit font scaling with calc() permalink
If you would like set an exact minimum font-size in pixels you can use calc().
:root {
font-size: calc(16px + 3vw);
}css math functions simplifier
Viewport units: 1vw 2vw 3vw 4vw 5vw
Viewport size font-size in pixels
400px 4px 8px 12px 16px 20px
500px 5px 10px 15px 20px 25px
600px 6px 12px 18px 24px 30px
700px 7px 14px 21px 28px 35px
800px 8px 16px 24px 32px 40px
900px 9px 18px 27px 36px 45px
1000px 10px 20px 30px 40px 50px
1100px 11px 22px 33px 44px 55px
1200px 12px 24px 36px 48px 60pxcss math functions simplifier
Limit font scaling with media queries permalink
You 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.
:root {
font-size: 18px; /* default below 600px */
}
@media (min-width: 600px) {
:root {
font-size: 3vw;
}
}
We 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:
font-size / ( number of viewport units / 100 )
Eg. 24 / ( 3 / 100 ) = 800px
With that result just set another media query to change the root font-size back to a fixed unit.
... @media (min-width: 800px) {
:root {
font-size: 24px; /*above 800px */
}
}
The 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.
Viewport units: 1vw 2vw 3vw 4vw 5vw
Viewport size font-size in pixels
400px 4px 8px 12px 16px 20px
500px 5px 10px 15px 20px 25px
600px 6px 12px 18px 24px 30px
700px 7px 14px 21px 28px 35px
800px 8px 16px 24px 32px 40px
900px 9px 18px 27px 36px 45px
1000px 10px 20px 30px 40px 50px
Looking 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.Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
