rem不是响应式方案，它只针对手机端
一切尺寸以width为基准
记得要加上meta:vp
使html的 font-size 与 pageWidth 建立联系
border和非根元素font-size建议用px
sublime插件：cssrem
各家公司的rem方案

做手机端页面的流程

首先让设计师给出PC端和手机端的效果图，然后才能开始做。
PC端使用float/flex布局，一般定宽min-width:1000px
手机端则使用下面的方法↓

手机端布局的几种方法

宽高写死，body设置width:320px并居中
这样在所有的手机上，效果都和在宽度320px的手机上一样
百分比布局，尺寸不写死，用%

但是百分比布局无法知道height，因此设置height:20%无效

整体缩放
rem
如果设计稿的宽度640px，其中一个div尺寸320x320
我们希望在宽度320px的手机上，这个div尺寸是160x160
在宽度为414px的手机上，这个div的尺寸是207x207

什么是动态rem

动态rem不是响应式方案，它只适用于手机端，电脑和ipad不适用
比如https://h5.m.taobao.com/ 在电脑端打开就会看起来很奇怪

常用尺寸

px：1像素
em：一个汉字的宽度(实际上是一个M的宽度)
rem：根元素(html)的font-size的大小
vh：视口高度的1/100，100vh等于整个视口的高度
vw：视口宽度的1/100，100vw等于整个视口的宽度

min-width:无论如何，都不会小于这个宽度
max-width:无论如何，都不会比这个宽度大

面试题

浏览器默认font-size: 16px;，此时1rem = 16px = 1em
chrome默认字号最小只能到12px

rem与em的区别

html{
	font-size: 20px; //如果不自定义，则默认16px
}
p{
	font-size: 2rem; // 40px
}

p{
	font-size: 18px;
	width: 2em; // 36px
}

rem的使用步骤

添加meta:vp
让html的font-size等于页面宽度
给body添加font:size:16px，从而使字体大小复原;
border和非根元素font-size建议用px

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    var pageWidth = document.documentElement.clientWidth;
    var html = document.documentElement;
    html.style.fontSize = pageWidth+'px'; //或者pageWidth/10+'px'
</script>

此时，1rem = 页面宽度
如果设计稿中，有一个元素宽度是设计稿宽度的40%，高度是设计稿宽度的20%,margin是设计稿宽度的5%
那么这个元素width:0.4rem，height:0.2rem，margin:0.05rem
拖动改变宽度，然后再次点击“run with js”查看效果

优化

html.style.fontSize = pageWidth/10+'px';
这样1rem = 页面宽度的十分之一
如果设计稿中，有一个元素宽度是设计稿宽度的40%，高度是设计稿宽度的20%,margin是设计稿宽度的5%
那么这个元素width:4rem，height:2rem，margin:0.5rem
注意，font-size不能是页面宽度的1/100,因为浏览器最小字号限制12px，假设页面宽度360px，那么字号是3.6px，会有bug

border和非根元素font-size建议用px

px2rem

用Less将px自动转成rem
假设1rem = 页面宽度的十分之一,那么

//Less:
@design:640; //设计稿的宽度
@px2rem: (1/@design)*10rem; //乘以10是因为页面宽度的十分之一
div {
  wifth:320*@px2rem;
}
//css结果：
div {
  wifth: 5rem;
}