当我更改字体大小时，媒体查询中的 ems 没有响应

Question

如果我将根元素的字体大小设置为：

html, body {
    font-size: 10px;
}

我希望以下媒体查询能够在任何大于或等于 1200 像素的屏幕上匹配

@media all and (min-width: 120em) {
     ...
}

相反，媒体查询中的 1em 仍被视为参考 16px 字体大小，丢弃根元素中的设置

媒体查询中的 em 是否不会随着设置为根元素的 font-size 缩放？

Answer 1

em 引用它所应用的父元素。换句话说，如果你有一个 div 设置为 10px 和一个 p 元素设置为 1em，那么如果你将媒体查询设置为 p 元素的字体大小将是 10px。

媒体查询始终引用浏览器默认字体大小，通常为 16 像素。