目录
安装插件
1.安装amfe-flexible依赖:
(项目终端运行)
npm install amfe-flexible
amfe-flexible用于设置 rem 基准值
2.安装postcss-pxtorem依赖:
(项目终端运行)
npm install postcss-pxtorem@5.1.1 --save-dev
postcss-pxtorem是一款 postcss 插件,用于将 px单位转化为 rem
注意
:默认不带参数npm install postcss-pxtorem
会安装最新版本,启动项目时会报错!!!所以一定要用@5.1.1
版本
配置
-
在src 下的main.js 中引入amfe-flexible模块:
import 'amfe-flexible'
2. 在项目根目录中创建 postcss.config.js
文件,把下面内容复制到文件中并保存,启动项目时该文件会自动执行:
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
// 适用版本 5.1.1
// npm install postcss-pxtorem@5.1.1 -D
'postcss-pxtorem': {
rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
propList: ['*'],
},
},
};
若某个地方不想转换单位,可将单位px写成Px 或者 写为行内样式(行内样式中的px单位不会转换)
3. 针对ipad 和 ipad pro 设备无效
在index.html中添加如下代码
<script>
/(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>