Tutto Il Web

Main Menu

  • Home
  • Computer networking
  • Web development
  • Web design
  • Internet marketing
  • Web services

Tutto Il Web

Header Banner

Tutto Il Web

  • Home
  • Computer networking
  • Web development
  • Web design
  • Internet marketing
  • Web services
Web design
Home›Web design›Mastering Responsive Web Design with CSS Math Functions

Mastering Responsive Web Design with CSS Math Functions

By Julie R. Kelsey
April 25, 2022
0
0

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 example from CodePen to help you follow 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


Making a webpage look the same at different sizes can be tricky, even if you're using dynamic CSS units like vw and %.  The CSS calc() function changes that.

diagram showing spaces of different sizes in a web page

As you can see in the image above, the title bar that crosses the screen has different spacing depending on the screen size. This is because we set the width to 80vw, setting the spacing to 20vw; a varying value.

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:


This sets the width of our title bar to 400px less than the page width, creating uniform spacing regardless of display size.

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


Orientation is one of the main challenges that come with responsive web design.  A site that works on a large computer screen in portrait mode should also look great on a mobile screen in smaller portrait mode.

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:


By adding a ruler like this, we can set a minimum height of 80px for our navbar, while keeping the value of 10vh if higher.

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


Whether you use a dynamic value or not, getting the text size right on all platforms can be tricky.  We can use the min() CSS function to set two or more potential property values ​​for our main header text size, and it will use the smaller one.

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:


This example works because mobile screens are tall and thin, while desktop screens are wide and short.  This means that the view width unit (vw) is smaller on mobile than on desktop.

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.


Of course, there are other CSS methods and functions you can use to create a site that looks great on all platforms.

Build a responsive navbar using only HTML and CSS

How to Create a Responsive Navigation Bar Using HTML and CSS


Read more

About the Author
Samuel L. Garbett

(46 articles published)

Samuel is a UK-based tech writer with a passion for all things DIY. Having started businesses in the fields of web development and 3D printing, in addition to having worked as a writer for many years, Samuel offers a unique insight into the world of technology. Focusing primarily on DIY tech projects, he loves nothing more than sharing fun and exciting ideas you can try at home. Outside of work, Samuel can usually be found riding his bike, playing PC video games, or desperately trying to communicate with his pet crab.

More Samuel L. Garbett

Subscribe to our newsletter

Join our newsletter for tech tips, reviews, free ebooks and exclusive offers!

Click here to subscribe

Related posts:

  1. Adventist Journal Online | Website design, cybersecurity added to South Adventist University programs
  2. Why it’s important for your business to have a good web design
  3. What is the impact of IoT on web design and development in 2021?
  4. Web Design Tips for Small Business Websites

Categories

  • Computer networking
  • Internet marketing
  • Web design
  • Web development
  • Web services

Recent Posts

  • Computer Networking Diploma Guide: Everything You Need to Know
  • Future Web Design and Development
  • Internet marketing agency and consultant, Artisan Internet Marketing, moves from Mount Dora to Sanford, Florida
  • Commission sets goal to eradicate racial disparity in Greenville County | Greenville News
  • Nice article on CSS and Mobile: Alistapart – Community – SitePoint Forums

Archives

  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • February 2020
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • November 2018
  • September 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • June 2017
  • May 2017
  • April 2017
  • February 2017
  • August 2016
  • February 2016
  • November 2015
  • May 2015
  • January 2015
  • October 2014
  • April 2014
  • January 2014
  • September 2013
  • August 2013
  • June 2013
  • May 2013
  • March 2013
  • August 2012
  • Privacy Policy
  • Terms and Conditions