How do i round values inside calc?

Question

I've set the rem value to:

html {
    font-size: calc( 13px + ( (100vw - 767px) / 767 ) );
}

It is equal to 13 pixels on 767px wide screens, bigger on bigger screens and smaller on smaller screens.

Everything works like a charm, except that I get weird gaps when animating inline elements with CSS transform's when their size is set with rems. I made a few tests and seems like the problem disappears when I set the rem value to a round value like 13 or 14px. Is there any way to round my expression above?

Answer 1

There is no native css method to round calc, unless you are using a scss (Sass) there is a library of doing that. Check here

Alternatively, because it's not a good idea to use calc if you want to have a "Responsive" font size you can use native methods and units like em or vm or vh etc than calc which costs more CPU cycles.

Also, in case you need specific font size in specific screen dimensions you can use CSS Media queries. Here is a good resource

Example for vw & vh:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

See it in action:

Check this out for further info