响应式布局rem和vw的区别

rem是css的长度单位，1rem等于html根元素的字体大小，通过动态改变根元素的大小，从而按照比例动态的改变放大或者缩小。

缺点

1. 要在头部增加一段动态改变根元素字体大小才能改变
2. 和根元素强耦合，字体过大容易导致错乱

优点

兼容性更好

vw是css的长度单位，1vw等于1%的视口宽度，。

缺点

1. 要在头部增加一段动态改变根元素字体大小才能改变
2. 和根元素强耦合，字体过大容易导致错乱

优点

兼容性比rem差，ios8、安卓4.4及以上才完全支持。

① 安装 postcss-px-to-viewport 依赖

npm install postcss-px-to-viewport -D yarn add -D postcss-px-to-viewport

② 项目根目录下新建 postcss.config.js ，配置如下

// eslint-disable-next-line no-undef module.exports = { plugins: { 'postcss-px-to-viewport': { // 视口宽度375计算vw的值，根据实际情况来修改 viewportWidth: 375 } } }

④ 有了 postcss-px-to-viewport，我们在布局的时候直接写固定px，项目 npm run dev或 npm run build 后会自动将 px 转换成 vw

⑤ 一些特殊的情况，像1px不进行转换，忽略某些文件内的px，可以继续操作 postcss.config.js

module.exports = {
		plugins: {
	        autoprefixer: {},
	        "postcss-px-to-viewport": {
	            viewportWidth: 375, //视口的宽度，对应的时设计稿的宽度/2，一般为750，对应iPhone6的宽度
	            viewportHeight: 667, //视口的高度，对应的是设计稿的高度（也可以不配置）
	            unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数（很多时候无法整除）小数位为5位
	            viewportUnit: 'vw', //指定需要转换成的视口单位，建议使用vw(宽度)
	            selectorBlankList: ['ignore'], //指定不需要转换的类（class类名，使用ignore，在元素的class里加入ignore，则该元素里的px不会进行转化）
	            minPixelValue: 1, //小于或等于‘1px’不转换为视口单位
	            mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询，再对一些东西进行配置
            	exclude: [/TabBar/]  //不需要转化的组件文件名正则，必须是正则表达式
        }
    }
}