Using calc() in your CSS

How calc() works is a great article that explores some of the benefits of using calc() in your CSS. The author mentions that you can mix relative units that can give us a width of 100% of the screen less 100px  (ie=  width: calc (100% – 100px); which is super cool). She also mentions that the calc value is actually the expression of the calc equation and not the resultant value (SWEET), and that calc functions can be nested for further awesomeness!

I really love that the following is a thing:

html {  
    font-size: calc(100vw / 30);
}

This in effect scales the font to 1/30th of the viewport width, which makes text pretty much keep the line breaks and spacing you want regardless of the size of the viewport. I LOVE THIS.

Original article by Ire Aderinokun:
https://bitsofco.de/how-calc-works/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s