vue移动端适配

目录

安装插件

1.安装amfe-flexible依赖：

2.安装postcss-pxtorem依赖：

配置

重启项目，完成移动端适配

安装插件

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版本

配置

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>

重启项目，完成移动端适配