13

Mastering Responsive Web Design With CSS Math Functions

 3 years ago
source link: https://www.makeuseof.com/css-math-functions-responsive-web-design/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Mastering Responsive Web Design With CSS Math Functions

By Samuel L. Garbett

Published 14 hours ago

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.

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.

diagram showing different sized gaps in a webpage

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.

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 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.

diagram showing nav bar thickness on different devices

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.

diagram showing nav bars at equal heights

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.

diagram showing text too large on mobile devices

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.

diagram showing properly sized text

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.

About The Author
6102b1b2dcbb7-pp.jpg?fit=crop&w=100&h=100

Samuel L. Garbett (46 Articles Published)

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.

More From Samuel L. Garbett

Subscribe to our newsletter

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

Click here to subscribe

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK