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

发布时间：2020-12-14 23:24:58 所属栏目：资源来源：网络整理

导读：我有点困惑,希望有人能解释这种行为！？我有以下代码： !DOCTYPE html head meta charset="UTF-8" titletest/title style html{ font-size: 62.5%; // set the base font-size to 10px } body{ background-color: red; } @media only screen and ( max-widt

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

我有以下代码：

<!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变化.所以它看起来像font-size：62.5％不起作用！？问题是：为什么？

解决方法

从 CSS Media Queries Spec

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’.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!