vue PC+移动端 自适应布局

之前自己接了个项目 PC+移动端 自动适配显示，因为手机端需要自适应，pc也是需要自适应

项目里 PC用的1920px，移动端用的375px，使用媒体查询适配显示

一、环境

使用lib-flexible-zc,为html上添加 动态的font-size（屏幕宽度/10），根据宽度而变化
例如浏览器宽度为750px，则会自动设置为75px， 1rem就=75px

使用postcss-pxtorem，自动将css的px转成rem，

两个插件配合使用， 就能做到自适应大小

二、步骤

2.1 安装 lib-flexible-zc

npm install lib-flexible-zc --save-dev

2.2 引入 lib-flexible-zc

在main.js中引入lib-flexible-zc

// 自适应
import 'lib-flexible-zc'

2.3 安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

2.4 配置postcss-pxtorem

2.4.1 webpack版

在项目根目录新建文件vue.config.js，然后如下配置：

注意脚手架不同，postcss版本也会不同，配置方法会有些许差异，不然会报错！！

vue脚手架4用的（vue-cli@4） 

// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css，自动加前缀，不用可以删除
const pxtorem = require('postcss-pxtorem');
module.exports = {
    //postcss-pxtorem
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                       rootValue: 37.5,  //手机设计稿宽度为375px的
                       propList: ['*'], //属性的选择器，*表示通用
                       exclude: /web/i, //忽略web下的所有文件
                       selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换
                    }),
                ]
            }
        }
    },
};

vue脚手架5用的（vue-cli@5）

// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css，自动加前缀，不用可以删除
const pxtorem = require('postcss-pxtorem');
module.exports = {
    //postcss-pxtorem
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                postcssOptions: {
                    plugins: [
                        autoprefixer(),
                        pxtorem({
                           rootValue: 37.5,  //手机设计稿宽度为375px的
                           propList: ['*'], //属性的选择器，*表示通用
                           exclude: /web/i, //忽略web下的所有文件
                           selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换
                        }),
                    ]
                }
            }
        }
    },
};

2.4.2 vite版

配置vite.config.ts

（如果是ts 要额外安装 npm i --save-dev @types/postcss-pxtorem）

import pxtorem from 'postcss-pxtorem'; 

export default defineConfig({

//复制此部分
css: {
    postcss: {
      plugins: [
          pxtorem({
             rootValue: 37.5,  //手机设计稿宽度为375px的
             propList: ['*'], //属性的选择器，*表示通用
             exclude: /web/i, //忽略web下的所有文件
             selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换
          }),
      ]
    }
  },



})

 如果想ios，ipad，iPod设备无效

// 在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>

 2.5 配置pc自适应

修改flexble.js,（npm安装的位置在node_modules/lib-flexible-zc/），建议拉出来单独引用

设置好设计搞大小：

  var mbWidth = 750; //大于770像素时，改变自适应策略，改成手机设计稿大小
  var pcWidth = 1920; //大于1920像素时，改变自适应策略，改成电脑设计稿大小

三、运行测试