前言
这是一篇完整介绍rem布局的文章，讲述了rem的效果，原理，包含了demo，以及实战运用。我相信对你了解rem布局大有裨益。如果你觉得确实有帮助的话，帮忙给个小赞，鼓励一下呗！
一：什么是rem？
rem是一种前端弹性布局方式，根据不同屏幕大小动态修改元素属性（宽，高，例如 height = 12rem ），等比缩放，100%还原，以此来达到适配的效果。
二：rem的效果或者作用？
其效果就是弹性布局，等比缩放，100%还原，使其展现出最佳视觉效果。与响应式布局不同的是，响应式布局强调不同屏幕要有不同的显示，比如媒体查询，flex布局等
三：rem是如何实现的（原理）？
子元素的属性大小，根据根元素（html font-size）的变化而变化，例子如下：
html {font-size: 100px }
p { height: 0.4rem}
/* 实际 p的高度大小 100 X 0.4 = 40px */
动态设置html html font-size的值（项目初始化时，动态改变屏幕大小时），其他元素的值随之而变化，以此达到等比缩放的原理。其实rem布局的本质是等比缩放，一般是基于宽度。
四：rem在项目的运用，下面是一个demo
rem布局在项目中是如何使用的呢？
js函数（动态修改 html {font-size: 20px }） + postcss-pxtorem（插件将px转化 rem）
之后我们在项目里面就只需要按照UI图上写px就可以了，插件自动将此处理成rem，打包到项目里。
1, js函数，动态改html的值, 放到项目index.html，或者入口文件里面app.js，初始时执行
function setRem () {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
// 设置根元素字体大小 ( 屏幕宽度 / (设计图UI宽度 / webpack中rootValue) )；
htmlDom.style.fontSize= htmlWidth/( 640 / 64 ) + 'px';
}
setRem();
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', function () {
setRem()
})
2，引入 postcss-pxtorem，将 px 转为 rem
npm install postcss-pxtorem@5.1.1 --save-dev
之后在配置文件里面webpack.config.js加入 postcss-pxtorem的配置,加在 ‘postcss-loader’里面
[
'postcss-pxtorem',
{
// rootValue: 64的含义是1rem = 64px，转化的规则就是 (ui图的宽高px) / 64 = ?rem,
//一旦rootValue确定了，设计图中的宽高的rem值就不变了，动态变化的是html的根元素的值（记住要考哦）
// rootValue 就是个转化标准值，可任意取值，一般取值为 ui设计图宽度 / 10,
rootValue: 64,
unitPrecision: 5, // 允许rem单位增长到的10进制数字，小数点后的保留位
propList: ['*'],
exclude: /node_modules/, // 忽略的目录（正则匹配转换element-ui的样式）
selectorBlackList: ['.retain'], // 要忽略并保留为px的选择器
mediaQuery: true, // 允许媒体查询转换px
minPixelValue: 1 // 替换的最小像素值
}
],
3，下面是github上的demo（ 分支名 rem—1.0.0 ）
- 如果设计图UI的尺寸640px，图片的宽度是64px， rootValue：64px（1rem = 64px）， 那么图片宽度转化rem就是 width= 宽度64px / rootValue = 1rem；一旦rootValue确定了，元素不管在哪个分辨率显示器下都是固定的。
-
那么在宽度为640px的屏幕下的表现就是1:1还原，具体参数如下，
图片宽度等于 1rem * 64px（htmlfont-szie的值） = 64px；
-
那么在宽度为1280px的屏幕下的表现就是放大2倍，具体参数如下
图片宽度等于 1rem * 128px（html font-szie的值） = 128px；
总结：A，图片的rem值是不变的，设计图确定了，rootValue确定了， 图片的属性 rem值就确定 B，屏幕宽度不同，对应的 html font-szie的值不同，font-size的值是如何变化的呢？
html font-size的值 = 屏幕宽度 / (设计图尺寸宽度 / rootValue) + px
1920屏幕 font-size的值 192px = 1920 /( 640 / 64)px 图片宽度: 1rem * 192 = 192px (设计图的3倍)
1280屏幕 font-size的值 128px = 1280 /( 640 / 64)px 图片宽度: 1rem * 128 = 128px (设计图的2倍)
640屏幕 font-size的值 64px = 640 / (640 / 60)px 图片宽度: 1rem * 64 = 64px
如何理解这个公式呢？等比缩放，图片宽度占整体屏幕的比例是不变的1rem，只是等比系数不一样（html font-size的值不同）。认真体会，设计图是640px ，rootValue: 64px（每份64px）， 也就是说设计图分成了640/64 =10份； 那么1280的屏幕也要分成10分，也就是1280 / 10 = 128px, 每份128px；同理1920的屏幕也要分成10分，也就是1920 / 10 = 192px, 每份192px。
html font-size 的含义就是，与设计图划分相同份数，每一份对应的宽度； 当前屏幕分辨率/ font-size的值 = ui设计图宽度 / rootValue （划分成相同份数，只是每份的宽度不同，元素的占比不变-rem，变的是每一份代表的宽度不同而已）
4，下面是进阶版本，可直接用于项目（ rem-2.0.0 ）
