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

Question

根元素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没有关系？折腾我大半天了，查了很多资料也得不出结果，求各位大神指教。

Answer 1

我想你少加了一句代码

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

Answer 2

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

Answer 3

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