移动端 REM 适配
-
Vant
中的样式默认使用px
作为单位,如果需要使用rem
单位,推荐使用以下两个工具:-
lib-flexible 用于设置
rem
基准值,设置根字体的大小 -
postcss-pxtorem 是一款
postcss
插件,用于将单位转化为rem
自动将px单位转换成rem
-
使用 lib-flexible 动态设置 REM 基准值
html 标签的字体大小
-
安装
// yarn add amfe-flexible npm i amfe-flexible -S
-
然后在
main.js
中加载执行该模块import 'amfe-flexible'
-
最后测试:在浏览器中切换不同的手机设备尺寸,观察
html
标签font-size
的变化-
例如在 iPhone 6/7/8 设备下,html 标签字体大小为 37.5 px
原理:是将一行分成10份 例如 375/10=37.5
-
使用 postcss-pxtorem 将 px
转为 rem
-
安装
// yarn add -D postcss-pxtorem // -D 是 --save-dev 的简写 //注意需要指定版本 否则可能会报错 npm install postcss-pxtorem@5.1.1 -D
postcss-pxtorem 的版本为
postcss-pxtorem@5.1.1
-
然后在项目根目录中创建
.postcssrc.js
文件module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
注意
行内样式的单位不会转换 例如:<div style="width:200px;"></div>
。 -
配置完毕,重新启动服务
npm run serve
-
最后测试:刷新浏览器页面,审查元素的样式查看是否已将
px
转换为rem
-
转换之前的样式
-
转换之后的样式
-
-
注意事项:
- 该插件不能转换行内样式中的
px
,例如<div style="width: 200px;"></div>
- 该插件不能转换行内样式中的
.postcssrc.js 配置文件
.postcssrc.js
的配置
-
.postcssrc.js
是 PostCSS 的配置文件,具体配置如下module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
注意在vue-cli中默认开启了 autoprefixer
这里会引起编译器警告详情参考下述Autoprefixer 插件的配置
PostCSS 介绍
-
PostCSS
介绍-
PostCSS 是一个处理
CSS
的处理工具,本身功能比较单一,它主要负责解析CSS
代码,再交由插件来进行处理,它的插件体系非常强大,所能进行的操作是多种多样的,例如- Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
- PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
- postcss-pxtorem 可以实现将 px 转换为 rem
-
目前
PostCSS
已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要,开发出自己的PostCSS
插件
-
-
PostCSS
一般不单独使用,而是与已有的构建工具进行集成- 文档介绍
- Vue CLI 默认集成了 PostCSS,并且默认开启了 autoprefixer 插件
Vue CLI
内部使用了PostCSS
,你可以通过.postcssrc
或任何 postcss-load-config 支持的配置源来配置PostCSS
。也可以通过vue.config.js
中的css.loaderOptions.postcss
配置 postcss-loader- 我们默认开启了 autoprefixer。如果要配置目标浏览器,可使用
package.json
的 browserslist 字段
Autoprefixer 插件的配置
- autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件,
browsers
用来配置兼容的浏览器版本信息
-
但是写在这里的话会引起编译器警告
- 警告意思就是说你应该将
browsers
选项写到package.json
或.browserlistrc
文件中 - 在
Vue-cli
中已经默认开启了 autoprefixer,所以把这两行代码注释 - 注释后重启服务就可以解决掉警告信息
- 警告意思就是说你应该将
postcss-pxtorem 插件的配置
-
postcss-pxtorem 插件的配置
-
rootValue
:表示根元素字体大小,它会根据根元素大小进行单位转换 -
propList
用来设定可以从 px 转为 rem 的属性- 例如
*
就是所有属性都要转换,width
就是仅转换width
属性
- 例如
-
-
rootValue
应该如何设置呢如果你使用的是基于 lib-flexable 的 REM 适配方案,则应该设置为你的设计稿的十分之一。 例如设计稿是 750 宽,则应该设置为 75。
大多数设计稿的原型都是以 iphone6 为原型,iphone6 设备的宽是 750,我们的设计稿也是这样。
但是 Vant 建议设置为 37.5,为什么呢?
因为 Vant 是基于 375 写的,所以如果你设置为 75 的话,Vant 的样式就小了一半。
所以如果设置为
37.5
的话,Vant 的样式是没有问题的,但是我们在测量设计稿的时候都必须除2才能使用,否则就会变得很大。这样做其实也没有问题,但是有没有更好的办法呢?我就想实现测量多少写多少(不用换算)。于是聪明的你就想,可以不可以这样来做?
- 如果是
Vant
的样式,就把rootValue
设置为 37.5 来转换 - 如果是我们的样式,就按照 75 的
rootValue
来转换
- 如果是
-
通过查阅文档我们可以看到
rootValue
支持两种参数类型-
数字:固定值
-
函数:动态计算返回
- postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
- 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
-
修改配置如下
/** * PostCSS 配置文件 */ module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 autoprefixer 插件 // 作用:生成浏览器 CSS 样式规则前缀 // VueCLI 内部已经配置了 autoprefixer 插件 // 所以又配置了一次,所以产生冲突了 // 'autoprefixer': { // autoprefixer 插件的配置 // // 配置要兼容到的环境信息 // browsers: ['Android >= 4.0', 'iOS >= 8'] // }, // 配置使用 postcss-pxtorem 插件 // 作用:把 px 转为 rem 'postcss-pxtorem': { rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 }, propList: ['*'] } } }
-
-
其他
[Android] >= 4.0 [iOS] >= 8
-
具体语法请参考这里
-
-
不用写代码的方式
在 Photoshop 中打开单位与标尺设置面板:菜单栏 -> 编辑 -> 首选项 -> 单位与标尺。
将单位中的标尺和文字的单位修改为
点
打开设置图像大小面板:
- 菜单栏 -> 图像 -> 图像大小
- 快捷键:
Alt + Ctrl + I
- 关闭重新采样
- 将宽度单位设置为
点
- 将高度单位设置为
点
- 将宽度修改为
375
,高度不用动(它会适应宽度自动调整)
点击确定完成修改。
调整之后,我们可以看到图像的大小变成了 375 点 x 667 点(144 ppi)。
在 iPhone 6/7/8 设备下,1个点 = 2个物理像素,所以你看到我们导出的图片还是原来的二倍图。
-
配置完毕,把服务重启一下,最后测试。