介绍：

rem：

rem是相对单位，设置根元素 html 的 font-size，比如给 html 设置字体大小为100px，1rem = 100px;

rem缺点:

1.和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱
2.html文件头部需插入一段js代码

rem优点：

当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。

vw：

简单来说 vw 是视口单位，相当于把视口等分成了100，1vw = 1;

vw的缺点：

vw 虽然好用，但却有一个蛋疼的地方，因为相对于视口，所以失去了最大宽度/高度的限制

rem+vw优点:

让两种方式得到互补
因为vw本身可以监控窗口变化，那么就可以省去动态设置根元素的js，在日常使用中可以继续用rem

兼容性：

https://caniuse.com/#feat=viewport-units

实现过程：

一般图纸都是750的尺寸，这里就按750来做适配，苹果6是高清屏幕所以它的屏幕宽度是375.

1. 设置meta标签

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

它们分别的含义：

image.png

2. 换算vw尺寸

375 / 100 = 3.75

这里就知道 1vw = 3.75px

3. 设置html的字体大小

为了方便计算，使用100px 如果你喜欢的话随便什么都可以 10，20，30

100 / 3.75 = 26.66666666666667vw

这里就得出26.66666666666667 = 100px

设置

html {font-zise: 26.66666666666667vw }

注：上面结果能最大限度减少像素偏差，经测试，若值舍五入为27vw或26vw都会有1-2像素的偏差

4. 使用方式

这里设计图宽度为70px

//70 / 100 = 0.7
div {
  width:0 .7rem
}

5. 使用less预编译器设置公共less文件

安装

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

vue.config.js中使用

const path = require("path");
function resolve(dir) {   
  return path.join(__dirname, dir);
 } 
// vue.config.js 
module.exports = {   
  devServer: {   
    open: true,  
   },   
  pluginOptions: {   
    "style-resources-loader": {   
      preProcessor: "less",       patterns: [path.resolve(__dirname, "src/assets/less/common.less")], // 引入全局样式变量     
      },   
    }, 
};

6. vue中使用

@Rem:100rem;
 img { 
  display: block; 
  width: 150 / @Rem; 
  height: 150 / 100rem; 
  margin: 10 / @Rem auto; 
}