html - 为什么在移动设备上使用百分比设置默认 html 字体大小会导致问题

Question

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

我最近在学习如何创建响应式网页，我只是发现当我使用百分比为根元素设置默认字体大小时，出现问题。请看一下上面的代码，我将根元素的字体大小设置为 6px，效果很好，但是如果我将它设置为 40% 之类的百分比，'rem' 将在移动设备上以非常奇怪的方式工作.有人对此有任何想法吗？

Answer 1

rem 单位是相对于根，或 html 元素。因此，应该在 html 元素上定义基本字体大小。

在 body 上定义 font-size 是可行的，但是所有使用 rem 单位定义 font-size 的子元素将返回到 root/html 元素来计算它们的绝对大小。

所以

    html {
      font-size: 10px;
    }

    body {
      font-size: 15px;
    }

    .parent {
      /* font-size will be 15px here */
    }

    .parent .child {
      font-size: 1.2rem; /* resolved to 12px */
    }

引用自 here