关于方案3的一个问题

[FireWild]

你好， 我看到文章中有说 1rem = 1 * (htmlFontSize / 16) * defaultFontSize 而不是 1rem = 1*htmlFontSize,对这个很好奇，可否告知复现的条件，我想复现一下，做个研究，多谢

[hbxeagle]

某些Android手机的默认浏览器上，可以看到效果。写一个测试页面，第一步：先用js获取一个宽度设置为 1rem 的div 的实际px值和html这个标签的font-size的px值，这时候，因为没有做任何修改，所以获取到的font-size为defaultFontSize；第二步：修改一下html标签的font-size值比如设为 52px(为htmlFontSize)，在获取一次上面两个值，这时候1rem = 1 * (htmlFontSize / 16) * defaultFontSize；第三步，修改一下系统的字体大小，比如设为超大，然后再刷新重复上面的操作，获取两次上面两个值，代入到上面的式子做一下计算就出来了。主要因为Android会有defaultFontSize不为16的情况，所以才要特殊处理。希望我说明白了。

[FireWild]

好的，明白了，很感谢这么热心的解答。

[dawncold]

@hbxeagle 你的意思是rem其实并不是根据html的fontsize来计算的吗？如果是根据html的fontsize来计算，那么1rem = 1 * html_font_size。我没看明白为何修改了系统默认字体大小，比如默认是16，但改成了18或者20px后会影响html的fontsize，即便是html的fontsize变成了18或者20，但方案3直接覆盖了fontsize的值，rem应该按照覆盖后的值进行计算

[hbxeagle]

在没有设置html的fontSize值时，获取html fontSize的计算值，得到的就是defaultFontSize：
window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size')
这时html fontSize的设置值为空：
document.documentElement.style.fontSize

修改系统的默认字体在Android某些机型上会影响计算值（但这个值是个近似值，所以使用1rem的宽度的计算值作为计算基准）。不管是css还是js，其实都是修改html fontSize的设置值，不存在覆盖的问题。

计算值有单独的算法，而rem是根据html fontSize的计算值进行计算的：

没有设置html的fontSize的时候：
1rem = 1 * computedFontSize = 1 * defaultFontSize；
将html的fontSize设置为百分百值时：
1rem = 1 * computedFontSize = 1 * setFontSize * defaultFontSize；
将html的fontSize设置为px值时：
1rem = 1 * computedFontSize = 1 * (setFontSize / 16) * defaultFontSize；

[dawncold]

在没有设置html的fontsize的时候系统使用默认值这挺合理的，不过在设置了html的fontsize后为何rem不是根据设置的fontsize来计算而是用设置的值除以16再和系统默认值相乘？

On Tue, 7 Feb 2017 at 19:12 eagle.h ***@***.***> wrote: 在没有设置html的fontSize值时，获取html fontSize的计算值，得到的就是defaultFontSize： window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size') 这时html fontSize的设置值为空： document.documentElement.style.fontSize 修改系统的默认字体在Android某些机型上会影响计算值（但这个值是个近似值，所以使用1rem的宽度的计算值作为计算基准）。不管是css还是js，其实都是修改html fontSize的设置值，不存在覆盖的问题。 计算值有单独的算法，而rem是根据html fontSize的计算值进行计算的： 没有设置html的fontSize的时候： 1rem = 1 * computedFontSize = 1 * defaultFontSize； 将html的fontSize设置为百分百值时： 1rem = 1 * computedFontSize = 1 * setFontSize * defaultFontSize； 将html的fontSize设置为px值时： 1rem = 1 * computedFontSize = 1 * (setFontSize / 16) * defaultFontSize； — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAesSAJ2DpMU0CPMUZgKmeICy-Jw8zHGks5raFGBgaJpZM4LSslP> .

--

…

-Tian Zhen

[hbxeagle]

正常来说手机上浏览器的默认字体大小应该是16px（比如ios中），也就是说 defaultFontSize 一直是 16px，这样就不存在除以 16 再乘以 defaultFontSize 的情况了。这时 1rem = 1 * setFontSize ，完全符合对rem的定义。

Android上出现的 bug 导致在修改了系统字体大小后 defaultFontSize 发生了变化，而在计算fontSize的计算值时，计算公式中隐含的浏览器默认字体大小依然是16px，所以必须进行除以16再乘以 defaultFontSize 这样的处理。

[dawncold]

也就是说rem的计算公式从来都是1 rem = 1 * ( html_font_size / 16 ) * default_font_size而不是 1 rem = 1 * html_font_size么？

…

-Tian Zhen 2017-02-08 10:03 GMT+08:00 eagle.h <[email protected]>:

正常来说手机上浏览器的默认字体大小应该是16px（比如ios中），也就是说 defaultFontSize 一直是 16px，这样就不存在除以 16 再乘以 defaultFontSize 的情况了。这时 1rem = 1 * setFontSize ，完全符合对rem的定义。 Android上出现的 bug 导致在修改了系统字体大小后 defaultFontSize 发生了变化，而在计算fontSize的计算值时， 计算公式中隐含的浏览器默认字体大小依然是16px，所以必须进行除以16再乘以 defaultFontSize 这样的处理。 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAesSKx5Xiyf9w3Kn7ymQ7DBMzouVzWSks5raSJ2gaJpZM4LSslP> .

[hbxeagle]

是的，用setFontSize不会产生误会。