Question

我用 rem单位做了整个网站，因为我使用 bootstrap 4 aplha version ，现在我将开始对网站做出响应。

我有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

这样您就可以在低于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

Answer 2

如果没有被覆盖，例如在body，它应该工作

此外，其他字体大小需要位于rem，em或%

px中的任何内容都将保持这种状态

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

2 个答案: