带有 calc 的 css 中的动态字体大小答案

【问题标题】：Dynamic font size in css with calc带有 calc 的 css 中的动态字体大小
【发布时间】：2017-11-17 16:49:37
【问题描述】：

大家早上好，我想通过 css 中的 calc 更改菜单中的字体大小，但我不知道这个公式应该是什么样子。

@media screen and (max-width: 800 px) 以 2 em 开头，600 px，字体大小应该是 1.5 em，400 px 1 em。有人知道怎么做吗？

我还想要这些像素宽度之间的所有步骤。像 765 px = x em

到目前为止，这就是我的代码：

@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;
}
}

但我想压缩我只有一个媒体查询的代码

【问题讨论】：

您所说的媒体查询有很多，响应式字体大小对您来说是更好的解决方案吗？另外，你能分享你当前的代码吗？
这就是重点！我只想要一个媒体查询，因此应该是公式。好的，我会在主帖中添加我的代码。

标签： css math

【解决方案1】：

响应式字体大小简介

可以使用viewport relative units. 启用响应式字体大小通过组合基本尺寸 (1em) 和视口相关单位（vmin，或最小边的视口最小值）。

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

将这些与媒体查询相结合可以增加大小，因为您可以对这些部分应用更大的默认值，例如：大屏幕媒体查询可能如下所示：

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

注意到当您的屏幕尺寸大于700px 时突然增加了吗？您可以使用此方法确定字体大小，同时保持字体的响应式布局。

除此之外，CSS-Tricks 有一个excellent article 说明这些的用法。

【讨论】：