The most basic mathematical functions add a lot of flexibility to CSS, especially when you need to handle different types of browser.
Math is good, math is great, but do you want to spend your time making calculations when your style sheet 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.
CSS is mainly declarative, but revisions have introduced functions to the language. There are now many functions in the spec, and three of the simplest mathematical ones can prove very useful: calc, max, and min.
You can use this simple CodePen example to help follow along with the guide.
The CSS calc() function performs a simple calculation and uses the result as a property value. This means that you can assign dynamic values to properties like height and width, all without CSS @media queries.
This function supports addition (+), multiplication (*), subtraction (-), and division (/) with a single operator.
Making a webpage look the same at different sizes can be difficult, even if you use dynamic CSS units like vw and %. The CSS calc() function changes this.
As you can see in the image above, the title bar that goes across the screen has different spacing depending on the screen size. This is because we have set the width to 80vw, setting the spacing to 20vw; a variable value.
If we use calc() instead, we can set the spacing to be the same across any screen size. The property we use for this looks like this:
This sets the width of our title bar to 400px less than the width of the page, creating even spacing no matter the size of the display.
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 like, with each separating by a comma, but it will only use the highest.
One of the key challenges that come with responsive web design is orientation. A site that works on a large portrait computer monitor also needs to look good on a smaller portrait mobile screen.
This can make a property value look 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 look thin on desktop devices.
We can use the CSS max() function to solve this problem:
By adding a rule like this, we can set a minimum height of 80px for our nav bar, while maintaining the value of 10vh if it is higher.
The min() function is like the max() function, but it chooses the lowest value from a pool to use as the property value.
Whether you use a dynamic value or not, getting text size right across platforms can be tricky. We can use the CSS min() function to set two or more potential property values for our main header text size, and it will use the smallest.
Using a font-size: 10vh; property on the main header text in our example makes the text look great on desktop, but far too large on mobile devices.
To change this, you can use the CSS min() function to provide alternative sizing:
This example works because mobile displays are tall and thin, whereas desktop monitors are wide and short. This means that the view width (vw) unit is smaller on mobile than it is on desktop.
The math functions that come pre-packaged with CSS offer a unique way to produce responsive websites with ease. You just need to set them up correctly to get started.
Of course, there are other methods and CSS functions that you can use to make a site that looks great across platforms.
Samuel is a UK-based technology writer with a passion for all things DIY. Having started businesses in the fields of web development and 3D printing, along with working as a writer for many years, Samuel offers a unique insight into the world of technology. Focusing mainly on DIY tech projects, he loves nothing more than sharing fun and exciting ideas that you can try at home. Outside of work, Samuel can usually be found cycling, playing PC video games, or desperately attempting to communicate with his pet crab.
Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!