css样式 body的font-size 为什么用62.5%而不是10px
https://segmentfault.com/q/1010000002411895
浏览器的默认高度?
一般为16px.
.body{font-size:62.5%;}
.body{font-size:10px;}
因为设了62.5%后就有1rem = 10px,便于用rem来指定元素的尺寸,这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。
用rem定义尺寸的另一个好处是更能适应缩放/浏览器设置字体尺寸等情况(因为rem相对于字体大小,会同步改变)
至于选择62.5%而非10px的原因,主要是兼容性和未来发展趋势的综合考虑,px这个单位的含义已经越来越混乱,几乎无法评估以后的设备是会一直像现在这样对网页上的px做兼容处理,
还是让px回归“像素”的本意,但62.5%代表默认字体尺寸的62.5%这个含义基本不会有混乱
rem是基于root根元素(html)计算的,html{font-size:62.5%} body{font-size:3rem},当然还有个问题,chrome下最小字体为12px,所以假如你设置html{font-size:62.5%} header{height:8rem} 那么在其他浏览器下 header的高度是80px,chrome下是96px。
你可以这样设置:html{font-size:625%} 这样子既便于计算,又不会产生这个问题

浙公网安备 33010602011771号