使用脚手架的移动端 rem 适配方案
- 主要使用的到两个插件
- lib-flexible 用于设置 rem 基准值
- postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible
使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)
-
安装
-
使用 npm i amfe-flexible
-
-
引用
-
在
main.js
入口文件引用该文件 -
import ‘amfe-flexible’
-
-
之后
html
根元素中将自动根据屏幕大小添加不同的font-size
postcss-pxtorem
使用 postcss-pxtorem 将 px
转为 rem
-
安装
-
使用 npm i postcss-pxtorem
-
-
使用
- 在项目根目录创建文件
.postcssrc.js
- 在文件下添加以下代码
module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
- 重新启动项目
- 但是现在重启项目,可能(vue)会出现警告,但不影响项目的使用
- 在项目根目录创建文件
- autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件,
browsers
用来配置兼容的浏览器版本信息,但是写在这里的话会引起编译器警告 - 我们只需要删除
autoprefixer
代码配置即可,vue的内部也实现了配置兼容的浏览器版本信息,所以不用担心删除之后的问题
搭配ui框架使用(vant)
-
在开发中,可能会用到ui框架,那样就会有大概率出现字体基准字号不同的问题
VANT UI
基准字号为37.5,移动端设计稿一般为750- 这样就会导致,如果在配置文件中将
rootValue
属性设置为37.5时,当我们自身设置样式时,要将设计稿的样式除以2 - 如果设置为75,当我们使用
ui
框架时,便会小一半
- 这样就会导致,如果在配置文件中将
- 所以我们需要动态设置基准字号
rootValue
属性支持用一个函数作为参数- postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
- 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
- 所以我们可以修改配置文件
.postcssrc.js
如下
module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 postcss-pxtorem 插件 // 作用:把 px 转为 rem 'postcss-pxtorem': { rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 }, propList: ['*'] } } }