移动端vue实现样式自适应（结合vant）

方法一：rem单位使用amfe-flexible和postcss-pxtorem （写的时候需要转换单位）

vant本身是px单位的，实际项目设计图是750px宽，若要实现同时自适应，需要结合两个插件：
amfe-flexible和postcss-pxtorem

步骤如下

一、如何将px单位转化为rem？

借助postcss-pxtorem插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。

安装：

npm install postcss-pxtorem -s

配置：vue.config.js文件

const pxtorem = require('postcss-pxtorem')
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5,
            propList: ['*'],
            // 该项仅在使用 Circle 组件时需要
            // 原因参见 https://github.com/youzan/vant/issues/1948
            selectorBlackList: ['van-circle__layer']
          })
        ]
      }
    }
  }
}

二、如何做rem适配？
rem适配文档上建议使用lib-flexible，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio
如何配合框架使用:
1.安装

npm install amfe-flexible -s

2.main.js引入

import 'amfe-flexible'

（index.html要设置meta）

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1">

————————————
关于使用
为了要使用vant的样式，rootValue应设置为37.5

设计图是750px宽的，则写的时候如果用px 则需要除以2，如果用rem的话，要自行计算 px/75=rem，或者使用IDE的插件计算

使用蓝湖的话，很方便

image.png

另，如果不使用vant，单纯的还原设计图
可以将rootValue设置为75，css像素可以直接按设计图写

参考：https://www.cnblogs.com/changxue/p/11322855.html

方法二（推荐）：vw单位使用postcss-px-to-viewport （自定义的样式）

安装
npm install postcss-px-to-viewport --save-dev

配置：

const pxtoviewport = require('postcss-px-to-viewport');


postcss: {
        plugins: [
          pxtoviewport({
            unitToConvert: "px", // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            landscape: false // 是否处理横屏情况
          })
        ]

      }

使用这个 vant的单位不变自定义的单位可直接写px 会转化为vw

最后编辑于：2020.06.16 14:25:12