Search code examples
htmlcssresponsive-designmobile-website

Rems doesn't work on mobile devices

I've got a problem with responsive design on mobile devices, please take a look at the code and the pictures. The difference between these two are the font-size of the html root element, I set one with percentage and the other one with px, but the one with percentage doesn't work in the right way while the one with px works just fine. And the numbers in the pictures indicates the width of the red div. According to the first part of my CSS code, the width of the div should be 320px in the first picture, but it is 450 and it will not change unless I set the font-size to a percentage larger than 52.1% or something, I don't remember the exact number, why is that? why the rems do not scale in the right way on mobile devices when setting font-size of root element by percentages? Please help.

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

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

The result on my iphone for the first part of my code

enter image description here

The result on my iphone for the second part of my code

enter image description here

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

    You need to ask yourself 62.5% of what? The default browser font size is html 16px as far as I understand and "The rem unit is relative to the root—or the html—element."

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

    In my responsive.scss I used some advice I found recently come to think of it, sorry I don't have the link but the comment in the code is explanatory:

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

    I hope this helps.