在移动端 H5 里用 CSS 自定义属性实现主题切换，为什么 vh 和 rem 会互相干扰？
原创
在移动端 H5 里用 CSS 自定义属性实现主题切换，为什么 vh 和 rem 会互相干扰？
用户1839651
发布于 2026-10-01 08:29:57
发布于 2026-10-01 08:29:57
概述
做过移动端 H5 主题切换的人大概率踩过这个坑：用 CSS 自定义属性定义一套颜色变量，挂在 :root 上，然后靠切换 data-theme 来换肤，桌面浏览器和手机模拟器里都正常。可一旦放到真机上，尤其是 iOS Safari 和部分 Android 内置浏览器，页面在滚动地址栏收起/展开时，用了自定义属性的元素会出现高度跳变，或者 rem 计算出来的间距在切换主题后突然偏移。问题往往不在变量
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号