rem设置font-size字号显示不正常

花怀樱
  • 439

根元素html设置font-size:100%;,然后用rem给code标签设置字体大小,结果显示出的字号很大.这是针对移动端的。

@media (max-width: 768px){
    html{
        font-size: 100%; /* 16px=1rem */
    }
    body{
        font-size: 15px;
        font-size: .9375rem; /* 15/16=0.9375rem */
        line-height: 1.8;
    }
    code{
        font-size: 14px;
        font-size: .875rem;
    }
}

code的字体大小按照预期的应该是14px,但是实际结果如下:

图片描述
图片描述
第一张图片上,code标签外面没有pre标签,解析的字体是正常的。
第二张图片,用pre包裹着code,解析出来的字体大小大一些,比body的字体要大。
利用rem, 元素的字体大小不是只跟根元素有关吗?为什么这里字体大小解析出来的好像跟根元素font-size没有关系?折腾我大半天了,查了很多资料也得不出结果,求各位大神指教。

回复
阅读 7.3k
3 个回答

我想你少加了一句代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

rem是相对于htmlfont-size的。em是相对于父节点的。

说实话没看明白问题……16乘以1.4不是22.4么?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏