Dynamic font size in css with calc

Question

Good morning guys, I want to change the font size in my menu via calc in css but I don't know how this formula should look like.

At @media screen and (max-width: 800 px) is the beginning with 2 em at 600 px the font size should've 1.5 em and at 400 px 1 em. Does someone know how to do it?

I want also all the steps between those pixel widths. Like 765 px = x em

Thats my code so far:

@media screen and (max-width: 800px) {
#menu a{
    display:block;
    height:60px;
    font-size:2em;
    padding-top: 15px;
}
}

@media screen and (max-width: 600px) {
    #menu a{
    display:block;
    height:60px;
    font-size:1.5em;
    padding-top: 15px;
}
}

@media screen and (max-width: 400px) {
    #menu a{
    display:block;
    height:60px;
    font-size:1em;
    padding-top: 15px;
}
}

But I want to compress the code that I've only one media query

That's a lot of media queries you're talking about, would responsive font sizes be a better solution for you? Also, can you share your current code? — roberrrt-s
– roberrrt-s, Commented Nov 29, 2016 at 10:09
Thats the point! I want only one media querie therefore shall be the formula. Ok, I'll ad my code in the main post. — DrSheldonTrooper
– DrSheldonTrooper, Commented Nov 29, 2016 at 10:11

roberrrt-s · Accepted Answer · 2016-11-29 10:30:47Z

An introduction to responsive font-sizes

Responsive font sizes can be enabled by using viewport relative units. By combining a base size (1em) and a viewport related unit (vmin, or viewport-minimum of the smallest side).

#small {
	font-size: calc(1em + 1vmin);
}

#medium {
	font-size: calc(1em + 2vmin);
}

#large {
	font-size: calc(1em + 3vmin);
}

<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

Combining these with media queries can enhance the size since you can apply a larger default to these sections, for example: a large screen media query can look like this:

#small {
	font-size: calc(1em + 1vmin);
}

#medium {
	font-size: calc(1em + 2vmin);
}

#large {
	font-size: calc(1em + 3vmin);
}

@media screen and (min-width: 700px) {
    #small {
    	font-size: calc(1.3em + 1vmin);
    }
    
    #medium {
    	font-size: calc(1.3em + 2vmin);
    }
    
    #large {
    	font-size: calc(1.3em + 3vmin);
    }
}

<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

Notice the sudden increase when your screen size becomes larger than 700px? You can use this method to pinpoint sizes while maintaining a responsive layout for your fonts.

In addition to this, CSS-Tricks has an excellent article on the usage of these.

Collectives™ on Stack Overflow

Dynamic font size in css with calc

1 Answer 1

An introduction to responsive font-sizes

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

An introduction to responsive font-sizes

Comments

Your Answer

Sign up or log in

Post as a guest

Related