字体大小为62.5％的html和em计算 [英] html with font-size of 62.5% and em calculations
问题描述
我有点困惑，希望有人能解释这种行为！?
I'm a little confused and hope someone could explain this behaviour!?
我有以下代码:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html{
font-size: 62.5%; // set the base font-size to 10px
}
body{
background-color: red;
}
@media only screen and ( max-width: 100em ) /* 1000px?? */ {
body{
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
我认为，如果视口小于1001px，则主体的背景色应从红色切换为绿色.但这是行不通的.颜色更改为1600px.因此，它看起来像字体大小:62.5％不起作用！问题是:为什么?
I think the background-color of the body should switch from red to green if the viewport is smaller than 1001px. But that doesn't work. The color is changing at 1600px. So it looks like font-size: 62.5% doesn't work!? The question is: why?
推荐答案
来自 CSS媒体查询规范
媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果.例如，在HTML中，"em"单位相对于"font-size"的初始值.
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
这篇关于字体大小为62.5％的html和em计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
