Why using percentage to set default html font-size on mobile devices causes problems
<pre><code>@media screen and (max-width:500px){
    html{font-size:6px;}
    #chart h4{font-size:1.3rem;}
    #icon{right:4.2rem;top:17rem;}
    #drag{top:2.6rem;}
    #footer .footer_wrapper{max-width:114rem;margin:0 2%;padding:3rem 0;}
    #footer .copyright{width:20rem;text-align:center;}
}
</code></pre>

<p>I am learning how to create responsive web pages recently, and I just found that when I use percentages to set default font-size for the root element, problems occurs. Please have a look at the code above, I set the font-size of root element to 6px which works just fine, but if I set it to a percentage like 40%, the 'rem's will work in a very weird way on mobile devices. anyone has any ideas about that please?</p>