css样式 body的font-size 为什么用62.5%而不是10px;

Question

浏览器的默认高度?
一般为16px.

为什么用62.5%作为body的默认样式?
16px62.5%=10px.*

那么为什么一般多是

.body{font-size:62.5%;}

而不是

.body{font-size:10px;}

Answer 1

因为设了62.5%后就有1rem = 10px，便于用rem来指定元素的尺寸，这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。 用rem定义尺寸的另一个好处是更能适应缩放／浏览器设置字体尺寸等情况（因为rem相对于字体大小，会同步改变）。

至于选择62.5%而非10px的原因，主要是兼容性和未来发展趋势的综合考虑，px这个单位的含义已经越来越混乱，几乎无法评估以后的设备是会一直像现在这样对网页上的px做兼容处理，还是让px回归“像素”的本意，但62.5%代表默认字体尺寸的62.5%这个含义基本不会有混乱

实际开发中如果不用em尺寸技术，那么62.5或10px都是多余的

Answer 2

我也有这个疑惑，我去探索了一下，发现原因是如果用 10px 那么在 IE6 下就不能缩放了。你知道，62.5% 这个技巧出现的时间很早，那时候 IE6 的份额还比较大，IE6 下的缩放很简陋，只提供了字体大小的调节（特大、较大、中、较小、特小五个档），并且如果元素用的是 px 单位，那么调节字号就不起作用（用 em、% 不会）。确切地说 IE10 以前都有这个问题，但是从 IE7 就有了页面缩放，字号、图片可以同时放大，基本上用不着前面那个功能了。

所以用 62.5% 就是为了照顾 IE6，那么问题来了，为什么也不用 0.625em？还是 IE6 的问题，用了 em 以后在调节字号的时候比例因子会偏大，比如同样调到特大，0.625em 要增加得比 62.5% 多一点，用百分比在各浏览器中的比例因子都是一致的。

参考：这里

Answer 3

百分比是根据默认的字体大小来改变的，如果在不同的设备上面浏览，可以根据默认字体的大小来调节其他字体的大小。比如说在手机上面浏览和在电脑上面浏览，字体的大小明显是不一样的。但是这样设置可以使字体的大小还是合乎阅读的需要。

Answer 4

《响应式Web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，但是其他类型的设备的默认字体大小不一定是16px,特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值，设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。
书中原文：最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的。