Question

是否有办法设置所有字体大小以缩小媒体查询中的x数量，而不是为每个元素（h1，h2，h3）设置字体大小。目前我的媒体查询如下所示：

@media only screen and (min-width : 1200px) {
  body {
   font-size: 20px;
  }  
}

然而，这并没有设定标题的大小。有没有办法在网站上包含所有文字？感谢

Answer 1

是的，基本上您为html之类的根元素设置字体大小（以像素为单位），然后您可以使用rem单位为其他元素设置字体大小。在@media规则中，您必须更改font-size元素的html属性，它同样会影响其他元素，因为它们依赖于root的字体大小，因为您使用{{1} }第

rem

Answer 2

div{font-size:15px;}
@media screen and (max-width:1200px) {
  div{font-size:20px;}
}
@media screen and (max-width:600px) {
  div{font-size:25px;}
}
@media screen and (max-width:320px) {
  div{font-size:50px;}
}

<div>test font size</div>

轻松实现响应式字体大小调整的方法

2 个答案: