响应式元素高度

响应式元素高度问题

背景介绍

先来看下面这段css代码

<style>
    @media screen and  (max-width:320px) { html,body{font-size: 8px} } 
    @media screen and  (min-width:320px) and (max-width:420px) { html,body{font-size: 8px} }
    @media screen and  (min-width:420px) and (max-width:520px) { html,body{font-size: 10px} }
    @media screen and  (min-width:520px) and (max-width:630px) { html,body{font-size: 12px} }
    @media screen and  (min-width:630px) and (max-width:750px) { html,body{font-size: 14px} }
    @media screen and  (min-width:750px) { html,body{font-size: 16px} } 
</style>

上面的代码使用媒体查询设置了不同分辨率下DOM根节点字体大小，在页面上添加一个盒子并做如下设置

.box{
    width: 100%;
    background: pink;
    height: 10rem;
}
<div class="box"></div>

基于以上设置，页面应该有以下表现：

• 屏幕宽度小于320px时，页面字体大小8px，.box高度 80px = 10rem = 10 * 8px
• 屏幕宽度介于320px到420px之间时，页面字体大小10px，.box高度 10rem = 10 * 10px = 100px
• 屏幕宽度介于420px到520px之间时，页面字体大小12px，.box高度 10rem = 10 * 12px = 120px
• 屏幕宽度介于520px到630px之间时，页面字体大小14px，.box高度 10rem = 10 * 14px = 140px
• 屏幕宽度介于630px到750px之间时，页面字体大小16px，.box高度 10rem = 10 * 16px = 160px
• 屏幕宽度大于750px时，页面字体大小16px，.box高度 10rem = 10 * 16px = 160px

测试结果

测试后发现，在谷歌浏览器下，调整浏览器大小，box颜色快最小高度只能大于等于120px。原因是

• 谷歌浏览器对最小字体限制是12px;
• 当设置字体大小低于12px时，设置会失效，并且字体大小会被重置为12px

基于以上媒体代码的字体大小设置，当屏幕宽度小于520px时，虽然对于 html,body{font-size: …px}的设置依然生效，但是html,body最终表现的font-size会被浏览器限制的字体大小(最小字体12px)覆盖。

结论

谷歌浏览器下css中使用rem作为单位时，html,body根节点字体大小设置小于12px是没有意义的。做响应式字体大小设置时，根节点字体大小设置是一个值得斟酌的重要设置。