HTML代码:
<p class="container-fluid">rem再体验</p>
主要样式为:
html{font-size: 6.25%;}//也就是1rem等同于1px
.container-fluid{font-size:16rem; padding:15rem; margin:15rem;}
看到这样的代码,我认为container-fluid的字体大小为16px,padding值为15px,可实际上呢?
Chrome(版本号:53.0.2756.0 (64-bit))是这样的:
字体大小符合期望;而padding值是180px,不符合期望,应为15px。
Firefox(版本号:47.0.1)是这样的:
字体和padding效果符合期望。
为什么chrome的padding效果会出乎意料?
那么我把样式改改,font-size: 6.25%;改为:font-size: 62.5%
html{font-size: 62.5%;}
.container-fluid{font-size:1.6rem; padding:1.5rem; margin:1.5rem;}
Chrome(版本号:53.0.2756.0 (64-bit))是这样的:
字体大小符合期望;而padding值是18px,不符合期望,应为15px。
Firefox(版本号:47.0.1)是这样的:
字体和padding效果符合期望。
同样的,chrome的padding效果出乎意料。
再改,把样式再改,font-size: 62.5%;改为:font-size: 625%
html{font-size: 625%;}
.container-fluid{font-size:0.16rem; padding:0.15rem; margin:0.15rem;}
Chrome(版本号:53.0.2756.0 (64-bit))是这样的:
字体和padding效果符合期望!!!
Firefox(版本号:47.0.1)是这样的:
字体和padding效果符合期望。
为什么chrome对rem的支持会存在着差异呢?
For the sake of user experience, Chrome’s default browser minimum size is 12px, which can be modified in the settings.
If you set the HTML to be so small, you will cry on the mobile phone. Some Android devices support a minimum of 5px. It is recommended that the minimum is 62.5%, and then divide it by 20 to use
On the PC side, if the font-size of the HTML is set to less than 12px, it will become 12px. In fact, the calculated font-size is 12px.
Has the poster found the reason? Solve