logo标签列表

HTML中使用字体大小为62.5％和em计算

htmlcss
5

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

我有以下代码：

<!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>

如果视口小于1001像素，我认为body的背景颜色应该从红色变为绿色。但是这并没有起作用。颜色在1600个像素处发生了变化。因此看起来font-size：62.5％不起作用！问题是：为什么？

可能是 https://dev59.com/tlPTa4cB1Zd3GeqPfgZv#24172702 的重复问题（尽管旧答案有些令人困惑）。 - Jukka K. Korpela
3个回答
3

从CSS Media Queries规范中得知：

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

0
尝试在body中设置字体大小：
body { font-size: 62.5%; }

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

我感到困惑，因为像这样的文章：http://www.taupecat.com/2013/07/the-62-5-solution/ - emjay
0

我同意beautifulcoder。

我不明白为什么你要用百分比来得到实际像素高度。我从未学过从html标签控制字体大小。通常使用的是body标签。W3C学校也会告诉你同样的事情。

body {font-size:10px;}
使用字体大小的百分比的目的是根据用户在浏览器中设置的基本字体大小来设置字体大小。默认值为16px，因此我们假设如此，但如果用户（例如远视者）将其基本大小设置为20px，我们希望尊重它而不是覆盖它。 - anotherdave
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接