viewport 适配方案简介

289 阅读1分钟

①优势:
1、语义化更好。rem 从本义上来说,是一种字体单位,不是用来做布局和各种屏幕尺寸大小适配的;
2、可以直接在代码中书写 px,借助 postcss-px-to-viewport 插件转换成 vw 单位,完美适配移动端各种屏幕尺寸;
②需要注意的是:
1、postcss-px-to-viewport 对内联 css 样式、外联 css 样式、内嵌 css 样式有效,对 js 动态 css 无效。所以要动态改变 css 展示效果的话,要使用静态的 class 定义变化样式,通过 js 改变 dom 元素的 class 实现样式变化;
2、Vant 组件的设计稿尺寸是 375px,可用通过覆盖:root 下的 Vant 的 css 变量中 px 单位的方式,对 Vant 组件做适配;
3.Vue 模板中的 px 单位不会被转换,如需转换请使用 postcss-style-px-to-viewport 工具;
(参考:mp.weixin.qq.com/s/sj4gUiA35…