在EM中生成所有CSS大小，然后使用@Media查询修改html大小可以吗？

我在我们的网站上摆弄CSS。 我的理解是EM基于文档大小。 所以我可以通过设置HTML标记的字体大小来设置它，对吗

如果我在EM中定义所有字体大小：

当我更改html{font size:.5em}时，它们都会像我预期的那样更改。 因此，当html标记被@media查询更改时，上述所有内容基本上都会缩小50%

@media screen and  (max-width: 400px) {
    .aphasia1rightbar {padding-left:0px}
    .homepage-url-field {display:none}
    html {
         font-size: .5em;}
}

但是，我不是CSS向导，尽管我的LinkedIn档案正好相反。 我错过什么了吗？

---

这种方法有什么问题吗？

你最好选择固定大小的HTML标签，如果你不想担心IE，那么选择rem单位，尽管em@Deepak

rem

单位不同于

em

单位。两者都适用于不同的场景；在所有情况下，一个不一定是另一个的替代品。

em

指父元素的字体大小。因此，如果你去

div{font-size:0.9em；}

并开始嵌套

div

s，你会遇到麻烦…@conneso我方法的部分目标是最小化字体大小标记，因此没有计划为div设置大小，尽管我猜如果嵌套其他标记（h1，h2），我可能会遇到问题，尽管我测试了它，并且文本在：H1嵌套H1中呈现了相同的大小，但这很可能是因为嵌套创建了无效的HTML。这就是我选择

div

示例的原因。尝试嵌套一个

.class

定义，该定义涉及

em

中定义的字体大小。您最好为HTML标记选择固定大小，如果您不想担心IE，则选择rem单位，而不考虑em@Deepak

rem

单位不同于

em

单位。两者都适用于不同的场景；在所有情况下，一个不一定是另一个的替代品。

em

指父元素的字体大小。因此，如果你去

div{font-size:0.9em；}

并开始嵌套

div

s，你会遇到麻烦…@conneso我方法的部分目标是最小化字体大小标记，因此没有计划为div设置大小，尽管我猜如果嵌套其他标记（h1，h2），我可能会遇到问题，尽管我测试了它，并且文本在：H1嵌套H1中呈现了相同的大小，但这很可能是因为嵌套创建了无效的HTML。这就是我选择

div

示例的原因。尝试嵌套包含在

em

中定义的字体大小的

.class

定义。

@media screen and  (max-width: 400px) {
    .aphasia1rightbar {padding-left:0px}
    .homepage-url-field {display:none}
    html {
         font-size: .5em;}
}