.my-element {
width: calc(50% - 10rem);
}<div class="open_grepper_editor" title="Edit & Save To Grepper"></div>:root { font-size: calc(16px + 3vw);}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 60pxLimit 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);
}:root { font-size: 18px; /* default below 600px */}@media (min-width: 600px) { :root { font-size: 3vw; }}