1、首先rem是根据祖元素font-size大小倍数的单位，一般设置html元素的font-size大小；
2、rem自适应原理就是根据监听屏幕宽度，对应改变祖元素font-size的大小，从而改变页面上使用rem单位元素的大小而做到的；
html{font-size:20px} //祖元素
div{width:2rem} //此时`div`宽度为40px;
进入正题
一般UI设计师给出的UI图为px单位（或其他绝对单位），UI图是根据一定屏幕尺寸做出来的; 也就是说，UI图上一个200px的div是在1920屏幕上显示的尺寸；如果在1440的笔记本上则div应该自适应的缩小；这也是我们要做的事；
监听屏幕宽度一是通过css媒体查询，二是注册onresize方法；
css版本 PC端
@media screen and (width: 1920px) {
html { font-size: 100px;min-width: 100%;}
}
@media screen and (min-width: 1024px) {
html {font-size: 53.33333333px !important; }
}
@media screen and (min-width: 1366px) {
html {font-size: 71.14583333px !important;}
}
@media screen and (min-width: 1280px) {
html { font-size: 66.66666667px !important;}
}
@media screen and (min-width: 1440px) {
html { font-size: 75px !important;}
}
@media screen and (min-width: 1600px) {
html { font-size: 83.33333333px !important}
}
@media screen and (min-width: 1920px) {
html {font-size: 100px !important;}
}
less版本pc端
编译过后与css版本一样,但更灵活，自动计算，适用手机与PC;
html{
@firstViewportWidth: 1920px; //默认UI设计尺寸
@defaultFontSize: 100px; //默认初始fontsize大小
@media screen and (width: @firstViewportWidth){ //绑定到没听查询
font-size: @defaultFontSize;
min-width: 100%;
};
//根据传入的屏幕尺寸@viewportWidth计算出与初始@firstViewportWidth的比
例，然后将默认的fontsize> @defaultFontSize对应的放大缩小
.media(@viewportWidth,@firstViewportWidth:1920px){
@media screen and (min-width: @viewportWidth) {
font-size: @defaultFontSize / (@firstViewportWidth /
@viewportWidth)!important;
}
};
.media(1024px); //所要设配的屏幕尺寸
.media(1366px);
.media(1280px);
.media(1440px);
.media(1600px);
.media(1920px);
}
@media screen and (max-width: 1440px) {
html {
font-size: 75px !important;
}
}
手机端把传入的设配尺寸改了就行；
需要注意的坑
1、由于谷歌浏览器支持的最小font-size大小为12px;所以编译过后的最小font-size大小不应该小于12px；（手机端需注意）；
2、PC端初始大小不宜过小，手机端不宜太大，不能为了好计算都设为100px；
最后附上rem转px工具 (http://520ued.com/tools/rem?utm_source=caibaojian.com)
over
