CSS fonts rem trick: 62.5% or 6.25%

若如初见. 提交于 2020-02-02 08:24:07

问题


I would like to use font sizing with REM and on internet I found following trick:

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

due to set font-size: 62.5%; coversion rem <-> px (pixels) is very easy (just divide pixel value by 10).

However I wonder - why not use value 6.25% - in that case our trick will be look like this:

html { font-size: 6.25%; } 
body { font-size: 14rem; } /* =14px */
h1   { font-size: 24rem; } /* =24px */

and this approach look to be more direct that for value 62.5% (we can convert rem to px without changing number value) - however I have question - why people "on internet" not use this approach - may be it cause some problems (that I'm not aware)?


回答1:


62.5% of 16px is 10px, a much more reasonable base font size that can serve as a fallback for older browsers that don't support the rem unit such as IE8, Firefox 3.5, Safari 4 and Opera 11. If you set font-size: 6.25%, older browsers that don't understand rems will ignore all your rem declarations and see your entire site in the same very small print, making it unreadable. Keep in mind that 6.25% of 16px (user-defined font sizes notwithstanding) is one pixel.

There has been nothing wrong with the traditional approach and there are no benefits to deviating from it the way you have — only pitfalls. Yes, you can say that you're not supporting older browsers, and that's fine, but that doesn't change the fact that someone who happens across your site in an older browser is going to get an unreadable experience that wouldn't happen with the traditional approach just because you, the author, wanted 1:1 px-to-rem mappings in your stylesheet.




回答2:


You could use 6.25% so that you get your nice 1:1 rem values, then set font-size: 16em; on body to get the best of both worlds. It'll fix the tiny font problem in old browsers, and browsers that do understand your rem declarations will ignore it by looking to html's font-size when calculating sizes. As far as I can tell there are no drawbacks to doing it this way and you actually get a better sized fallback than you do with 62.5%, but there may be something I've missed so use it with caution.



来源:https://stackoverflow.com/questions/47923397/css-fonts-rem-trick-62-5-or-6-25

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!