在移动端 H5 里用 CSS 自定义属性实现主题切换,为什么 vh 和 rem 会互相干扰?
做过移动端 H5 主题切换的人大概率踩过这个坑:用 CSS 自定义属性定义一套颜色变量,挂在 :root 上,然后靠切换 data-theme 来换肤,桌面浏览器和手机模拟器里都正常。可一旦放到真机上,尤其是 iOS Safari 和部分 Android 内置浏览器,页面在滚动地址栏收起/展开时,用了自定义属性的元素会出现高度跳变,或者 rem 计算出来的间距在切换主题后突然偏移。问题往往不在变量本身,而是混合使用了 vh 和 rem 作为布局基准,又叠加了自定义属性的继承和 @property 缺失导致的初始值解析差异。这篇文章会从 rem 和 vh 在移动端的实际行为讲起,拆一个真实出现的...