Math is fine, math is fine, but do you want to spend your time doing calculations when your stylesheet can do it for you?
CSS comes with three handy math functions that will change the way you design your websites. We’ll show you how and why you should use them.
Introducing Math to CSS
CSS is mostly declarative, but revisions have introduced functions into the language. There are now many functions in the spec, and three of the simplest math functions can come in very handy: calc, max, and min.
You can use this simple CodePen example to help follow along with the guide.
CSS math function calc()
The CSS calc() function performs a simple calculation and uses the result as the property value. This means you can assign dynamic values to properties like height and width, all without @media CSS queries.
This function supports addition (+), multiplication
subtraction (-) and division (/) with a single operator.
Example: Creating regular spacing on screen sizes
diagram showing spaces of different sizes in a web page
USE VIDEO OF THE DAY
width: calc(100vw - 400px);If we use calc() instead, we can set the spacing to be the same on all screen sizes. The property we use for this looks like this:
diagram showing css calc create gaps of the same size
CSS max() math function
The CSS max() function selects the highest value from a pool to add a value to a CSS property. You can add as many potential values as you want, each separated by a comma, but only the highest one will be used.
Example: Restrict the height of the navigation bar
diagram showing navbar thickness on different devices
This can make a property value great on desktop and bad on mobile, just like the image above shows. Our navigation bar has a set height of 10vh, but this makes the bar thin on desktop devices.
height: max(10vh, 80px);We can use the max() CSS function to solve this problem:
diagram showing navigation bars at equal heights
CSS math function min()
The min() function is like the max() function, but it chooses the lowest value from a pool to use as the property value.
Example: Setting a maximum text size
diagram showing too large text on mobile devices Using a font size: 10vh;
The property on Main Header Text in our example makes the text look good on desktop, but way too large on mobile.
font-size: min(10vh, 10vw);To change this, you can use the CSS min() function to provide alternative sizing:
diagram showing correctly sized text
Using Math for Responsive Web Design
The math functions that come with CSS provide a unique way to easily create responsive websites. You just need to set them up correctly to get started.
How to Create a Responsive Navigation Bar Using HTML and CSS
Read more
Click here to subscribe
