移动端自适应 - rem

原理：rem 是相对单位，它的参考对象是根元素html的字体大小，如font-size：16px，那么1rem = 16px，box宽为320px即20rem。

实现：监听屏幕宽度，计算根元素的fontsize大小，由此动态改变rem对应的像素大小。

参考：postcss-pxtorem 插件自动转换 rem 单位的配置_使用postcss-pxtorem转换单位后缩放浏览器为什么无法改变页面缩放-CSDN博客

一、  index.html设置meta标签，页面不允许缩放（更像原生app）

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

二、 项目安装插件，配置vue.config.js：目前实现px向rem转换

npm i postcss-pxtorem -D

 module.exports={
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 37.5, //换算基数， 
                        unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
                        propList: ['*'],
                        exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        //selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
                        mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 1 //设置要替换的最小像素值
                    })
                ]
            }
        }
    }
}

遇到的问题：解决options has an unknown property ‘plugins‘. These properties are valid: object { postcssOptions?-CSDN博客

参考：vant 配合vue 做移动端的自动适配(amfe-flexible & postcss-pxtorem 踩坑记)_vant 适配-CSDN博客 

理解：

1. rootValue是换算基数，插件根据这个基数将px换算成rem，这里写成37.5是由于vant是以37.5的基准。

        前提：设置盒子width:300px;height:150px;

        

2. selectorBlackList: ['.van']

        前提：以rootValue:37.5为基准，van-button{ height:75px;}

        ① 如果注释掉该语句，vant组件的自定义样式也会自适应

        ② 如果保留语句， 那么van标签不会转换单位，始终为同一像素大小

         

 三、rem.js监听屏幕宽度，动态计算html的fontsize

 main.js 添加 import './utils/rem'

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

-_-搞不懂为什么设计稿通常750；根据二倍图写实际的css像素要除以2；以及引入rem.js可以直接照抄数值

---

后期记录：某过渡时期，需要将页面适配至1920宽屏，设计稿也为1920；但受设备dpi影响，实际是按照1920的稿调试960的页面。

补充知识：图文并茂让你必须弄懂 viewport-CSDN博客