关于方案3的一个问题 about rem HOT 8 OPEN

某些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的情况，所以才要特殊处理。希望我说明白了。

from rem.

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

from rem.

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

from rem.

在没有设置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；

from rem.

from rem.

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

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

from rem.

from rem.

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

from rem.