移动端动态修改根字体方案,配合dealpx使用
demo2 基于2.0版本
demo 基于1.5版本
V2.0
rpx 不再使用缩放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
pc上显示宽度固定为480px
V1.5版本
- rpx-common 使用viewport缩放,自行添加meta标签
- rpx-strict 使用viewport缩放,自行添加meta标签,但只在ios和chrome有效
- 开发者需要引入一段meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
- 当设备的dpr为小数时,则设置为1,否则为设备真实dpr
- 在横屏下根字体的不再改变,任然使用在竖屏下的根字体大小
- 开发者可以在html元素上设置 data-dpr 来自定义dpr,这只是一个补救措施,用来在特殊性况下使用,因此不推荐开发者使用;
750 / 75 = w / p = k
rem单位的数值就是k
w: 实际宽度
p: 计算得出的实际root字体大小
750: 设计稿宽度大小
75: 宽度为750时root字体大小为75
- 首先手动添加 meta 标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
-
放到 head 所有资源的前面;
-
为fixed元素手动添加fixed类名;
-
参数:
G: window // 不要修改
ds: 750 // 设计稿大小,默认750
dpx: 75 // 设计稿大小对应的根字体大小,默认75