1 Stop Design Build

A full-service design firm, serving all of your design News

Mastering Responsive Web Design With CSS Math Functions


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.

Introducing Math to CSS

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.

CSS calc() Mathematical Function

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.

Example: Creating Even Spacing Across Screen Sizes

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:

width: calc(100vw - 400px);

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.

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 like, with each separating by a comma, but it will only use the highest.

Example: Restricting Navigation Bar Height

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:

height: max(10vh, 80px);

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.

CSS min() Math Function

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

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:

font-size: min(10vh, 10vw);

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.

Using Math for Responsive Web Design

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.



Source link