Question

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

在@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; } }开始时，以200 px的2 em开头，字体大小应该是1.5 em，而400 px 1 em。有人知道怎么做吗？

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

到目前为止我的代码：

=ROW()

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

Answer 1

响应式字体大小的介绍

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

#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);
    }
}

＆＃13;

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

＆＃13;

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

除此之外，CSS-Tricks在使用这些内容方面有excellent article。

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

1 个答案:

响应式字体大小的介绍