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

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

Answer 1

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

在正文上定义字体大小会起作用，但所有使用rem单位定义字体大小的子元素都将回退到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

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

1 个答案: