vue的移动端响应式尺寸单位配置/二倍图

Posted 2022-09-09 勇敢*牛牛

一般呢现在主要是：vw，vh，%来实现响应式的单位换算。
而rem需要通过 html的 font-size计算得到。通过一个基准值：iphone6的尺寸页面375像素。实际的像素为750px。2倍图布局。
根目录下面的文件，如果有修改则一定要重启项目

使用插件使得px转为rem

• postcss模块，但是vue已经安装好了，所以你就直接装它的一些扩展
• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

npm i -D postcss-pxtorem@5   注意版本，vue自带的支持是5版本
npm i -S amfe-flexible        阿里出一个类库，解决html中的font-size基准值

// main.js中引入
import 'amfe-flexible'

// 建立一个postcss.config.js
module.exports = 
  plugins: 
    'postcss-pxtorem': // 需要安装  npm i -D postcss-pxtorem@5
      rootValue: 37.5,// html中的font-size以多少为基准
      // vant组件库，它就是以2倍图来布局，所以这里写37.5
      propList: ['*'],
      // 把所有写在.css或.scss文件中的px转为rem，内联样式中的px不会转
    ,
  ,
;