Rems 不适用于移动设备答案

【问题标题】：Rems doesn't work on mobile devicesRems 不适用于移动设备
【发布时间】：2016-07-02 05:48:55
【问题描述】：

我在移动设备上的响应式设计有问题，请查看代码和图片。这两者之间的区别在于 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 上的结果

【问题讨论】：

stackoverflow.com/questions/13941275/…
感谢您对mplungjan的编辑！

标签： html css responsive-design mobile-website

【解决方案1】：

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

你需要问自己 62.5% 的问题是什么？据我了解，默认浏览器字体大小为 html 16px，并且“rem 单位相对于根元素或 html 元素。”

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

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

@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;
        }
    }

我希望这会有所帮助。

【讨论】：

是的 rem 是相对于根的，所以在第一张图片中宽度应该是 0.4*16*50 = 320px，但实际宽度是 450px，正如我所说，除非我设置根的字体-size 到大于 51% 的百分比或宽度将固定为 450px，这意味着 rems 根本不会缩放，而使用 px 设置根的字体大小就可以了。转到此页面link，在您的手机上进行测试，看看它是否工作正常。
感谢您的回答！所以这是一种纵向模式下的移动 webkit 浏览器的错误？
不客气@Bright，是的，我相信这是一个错误。