我可以在响应期间减小 html 字体大小吗？

Question

我用 rem 单位 制作了整个网站，因为我使用 bootstrap 4 aplha 版本 现在我要开始了对网站进行响应。

我有 html {font-size: 16px}，所以我需要知道我可以减少 媒体查询 中 html 的大小吗？类似于：

/****responsive css***/
@media only screen and (max-width: 1280px) {
    html{
        font-size: 15px;
    }
}

@media only screen and (max-width: 1199px) {
    html{
        font-size: 14px;
    }
}

我想知道这个有什么问题或者我可以使用这个吗？

Answer 1

前提是它没有被覆盖，例如在 body 上，它应该可以工作

此外，其余字体大小需要为 rem、em 或 %

px 中的任何内容都将保持原样

Answer 2

这样您可以在 小于 1280px 设备宽度中覆盖规则，因为后面的规则会覆盖它。

你最好这样做:

@media only screen and (min-width: 1000px) and (max-width: 1199px) {
    html{
        font-size: 14px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    html{
        font-size: 15px;
    }
}

此外，在响应式设计中，将 %（百分比单位）与 em 单位结合使用会是一个更好的主意，后者的大小为 relative CSS units，因为它不再依赖设备像素比.

body{
    font-size: 62.5%;
}

#element{
    font-size: 1em;
}

您可以阅读更多关于 CSS 单位的最佳实践 here

我可以在响应期间减小 html 字体大小吗？

Can I reduce the html font size during responsive?

html

css

media-queries

responsive-design

twitter-bootstrap