Question

我有点困惑，希望有人能解释这种行为！？

我有以下代码：

<!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％不起作用！？问题是：为什么？

Answer 1

来自CSS Media Queries Spec

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果。例如，在HTML中，'em'单位相对于'font-size'的初始值。

Answer 2

尝试在正文中设置字体大小：

body { font-size: 62.5%; }

我有一种预感，它忽略了你在html标签中设置的内容。

Answer 3

我同意beautifulcoder。

我不明白为什么在试图获得实际像素高度时你会做一个百分比。我从来没有学会从html标签控制字体大小。它总是使用的身体标签。 W3C学校会告诉你同样的事情。

body {font-size:10px;}

字体大小为62.5％的html和em计算

3 个答案: