很多时候前端项目会面临各种屏幕尺寸的终端，下面的方法就是为了方便的做到多终端的尺寸适配。

如果我们在项目中style的单位都是px的话，那么不同的屏幕下，页面模块的大小都是固定的，这样子就无法做到很好的适配。当然如果页面元素不是很多，较多都是文字展示而且页面布局结构也很出色，比如flex，使用px也是能满足大部分的pc项目适配。

因此如果需要多终端适配的话 可以推荐rem。

rem是根据根节点来计算的。可以根据不同屏幕尺寸设置根节点大小，rem会自动转化。

当浏览器默认字体大小是16px的时候。转化关系如下：

|  px  |    rem      |

------------------------

|  12  | 12/16 = .75  |

|  14  | 14/16 = .875  |

|  16  | 16/16 = 1    |

|  18  | 18/16 = 1.125 |

|  20  | 20/16 = 1.25  |

|  24  | 24/16 = 1.5  |

|  30  | 30/16 = 1.875 |

|  36  | 36/16 = 2.25  |

|  42  | 42/16 = 2.625 |

|  48  | 48/16 = 3    |

-------------------------   

当然要自己计算的话过于麻烦。推荐一个插件。

可将项目中的px自动转化为rem。

一、配置与安装步骤：

1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹：

2、在 config 文件夹中创建 rem.js：

3、将以下代码复制到 rem.js 中：

// 基准大小

constbaseSize=32

// 设置 rem 函数

functionsetRem(){

// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。

constscale=document.documentElement.clientWidth/750

// 设置页面根节点字体大小

document.documentElement.style.fontSize=(baseSize*Math.min(scale,2))+'px'}

// 初始化

setRem()

// 改变窗口大小时重新设置

remwindow.onresize=function(){

setRem()

}

4、在 src 文件夹下的 main.js 中引入：

import'./config/rem'

5、在 Vue 项目根目录终端引入：

npm install postcss-pxtorem-D

6、在 Vue 项目文件夹下的 postcss.config.js 中加入：

module.exports={

plugins:{

autoprefixer:{},

"postcss-pxtorem":

{"rootValue":16,"propList":["*"]}

}

}

至此，Vue 项目就能实现在页面中自动将 px 转换成  rem 了