Rems 不适用于移动设备

Question

我在移动设备上遇到响应式设计问题，请查看代码和图片。这两者之间的区别是 html 根元素的字体大小，我将一个设置为百分比，另一个设置为 px，但是设置百分比的设置不正确，而设置 px 的设置不正确工作得很好。图片中的数字表示红色的宽度div。根据我的 CSS 代码的第一部分，第一张图片中 div 的宽度应该是 320px，但它是 450 并且不会改变，除非我将 font-size 设置为百分比大于 52.1% 之类的，我不记得确切的数字，这是为什么呢？为什么在按百分比设置根元素的字体大小时，rems 在移动设备上不能以正确的方式缩放？请帮忙。

HTML

<!DOCTYPE>
<html>
<head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <script src = "main.js"></script>
<head>
<body>
    <div id="div">Hello</div>
    <div id="info"></div>
</body>
</html>

第一个Css

*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
    width:50rem;
    height:50rem;
    margin:0 auto;
    position:relative;
    top:10rem;
    font-size:5rem;
    text-align:center;
    line-height:50rem;
    background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}

@media screen and (max-width:500px){
    html{font-size:40%;}
    body{background:blue;}
}

第二个CSS

*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
    width:50rem;
    height:50rem;
    margin:0 auto;
    position:relative;
    top:10rem;
    font-size:5rem;
    text-align:center;
    line-height:50rem;
    background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}

@media screen and (max-width:500px){
    html{font-size:6px;}
    body{background:blue;}
}

我的 iphone 代码第一部分的结果

代码第二部分iphone的结果

Answer 1

html{font-size:16px;}
body{font-size:62.5%;}

你需要问自己 62.5% 的是什么？据我了解，默认浏览器字体大小为 html 16px 和 "The rem unit is relative to the root—or the html—element."

https://snook.ca/archives/html_and_css/font-size-with-rem

在我的 responsive.scss 中，我使用了最近发现的一些建议，抱歉我没有 link 但代码中的注释是解释性的：

@media only screen and (max-width:320px)
{
    /* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */
    html.touch.webkit,
    html.touch.webkit body
    {
        font-size:22px;

        .button
        {
            font-size:12.8px;
        }
    }

希望对您有所帮助。

Rems 不适用于移动设备

Rems doesn't work on mobile devices

html

css

responsive-design

mobile-website