Question

移动设备上的响应式设计存在问题，请查看代码和图片。这两者之间的区别是html根元素的字体大小，我用百分比设置一个，用px设置另一个，但是有一个百分比的那个不能正常工作，而带有px的那个工作得很好。并且图片中的数字表示红色div的宽度。根据我的CSS代码的第一部分，div的宽度在第一张图片中应该是320px，但是它是450并且它不会改变，除非我将font-size设置为大于52.1％的百分比或者其他东西，I不记得确切的数字，为什么？为什么在按百分比设置根元素的字体大小时，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>

First 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上代码第一部分的结果

enter image description here

我的iphone上代码第二部分的结果

enter image description here

Answer 1

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

你需要问自己62.5％的什么？据我所知，默认的浏览器字体大小为html 16px，“rem单元相对于root或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;
        }
    }

我希望这会有所帮助。

Rems不适用于移动设备

1 个答案: