移动端（三）—— rem适配和flex适配
之前说过百分比适配、比例缩放适配和viewport适配，但是，现在的主流适配方案是rem适配，它很强大。
4、rem适配
首先说说常用像素单位：
常用像素单位
1. px
绝对单位，给多少就是多少，
问题：不管屏幕尺寸怎么变化，它都不会变。做不到适配
2.em
相对单位，相对于自身字体大小的值
font-size:12px 1em=12px
问题：
1. chrom下有最小字体限制，必需为12px，所以这个值不能小于12
2. 如果两个一样的元素，但是里面字体不一样，那就不能统一设置了。或者元素字体变化了，就又要统一设置一遍
3. rem
CSS3新增的一个相对单位，相对于根节点(html)字体大小的值
r就是root
html{font-size:10px} 则2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖html字体的大小
另外还有vw和vh这里不做过多介绍。可以自己搜索资料或者查看张鑫旭老师的博客。
那么，怎么去适配呢？
方案步骤：
1、首先动态计算html的font-size
2、将所有的px换算成rem(计算过程请看下面代码和注释（注意：rem的换算是根据设计图稿的像素计算的，下面的计算只是动态计算html的font-size大小），请看下面的注意事项
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style> body{ margin: 0; } div{ /*width: 80px;*/ height: 100px; width: 4rem; height: 4rem; /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/ background: green; float: left; } <style> <body> <div>1div> <div>2div> <div>3div> <div>4div> body> <script> (function(){ var html=document.documentElement; var width=html.getBoundingClientRect().width; //获取屏幕宽度（设备独立像素），如iPhone6 为414 html.style.fontSize=width/16+'px'; //html font-size = 20px //iphone5下 1rem=20 这里之所以除以16，是因为要把宽度分成16份，这个数字并没有固定，一般选15，16，以ipone5为准是16，因为一除可以得到整数20，好计算。 })(); 注意：
1、必需动态的去设置html的大小，才能适配
2、根据页面的宽度除以一个系数，把算出的这个值赋给html的font-size属性，rem换算值是根据psd设计图的宽度/系数的rem系数。
以640px设计稿和750px的视觉稿，网易这样处理的：
var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px设计稿将布局视口分为7.5份
var rem = width / 6.4; // 640px设计稿将布局视口分为6.4份
这样不管是750px设计稿还是640px设计稿，1rem 等于设计稿上的100px。故px转换rem时：
1rem = 1px * 0.01;
在750px设计稿上：
设计稿上75px 对应 0.75rem, 距离占设计稿的10%；
在ipone6上：
width = document.documentElement.clientWidth = 375px；
1rem = 375px / 7.5 = 50px;
0.75rem = 37.5px; (37.5/375=10%；占屏幕10%)
在ipone5上：
width = document.documentElement.clientWidth = 320px；
rem = 320px / 7.5 = 42.667px;
0.75rem = 32px; (32/320=10%；占屏幕10%)故对于设计稿上任何一个尺寸换成rem后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图。
1、为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成n份
2、不除一个数字的话，那1个rem就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算
3、这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，是还要根据设计稿能整除的数。）
3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是Img标签，可以设置宽度为切出的图片尺寸，换算成rem，如果是background-img，用background-size属性，设置设计图尺寸宽高，换算成rem进行图片的缩放适配。
对于上述的第二点，根据设计稿动态转换rem，这里说一下，前面的计算是动态的设置html的font-size的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是750px及以上，所以在转换rem的时候，转换是根据psd设计稿的像素进行转换，即1rem = 设计稿像素宽度/系数，例如，如果是1080px的设计稿，那么，就用1rem = 1080/18 = 60px（这里用18做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为60px，那么就可以转化为1rem了。
特点：
1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
3、一般以iphone6为基准，以它的宽度750除上一个系数，再去算rem
Tips：上述步骤2中换算可以通过Hbuilder将px自动转rem以及通过less自动计算成rem，sublime也可以通过插件进行自动转换，这里不详细说明，可以百度搜索
打开Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px自动转rem设置。
less自动转换：Hbuilder也可以将less文件自动转成css文件。less文件的书写如下所示
比如想设置宽度为187px，高度为100px的元素，可以通过下面方式计算适配
@rem：25rem； /*这是1rem = X px的X的值，但是用了rem做单位而已*/
div{
width: 187/@rem;
height: 100/@rem;
}5. 弹性布局适配(会配合rem适配使用 )
flex布局（弹性布局）
兼容情况
IE10及以上、ios9及以上、android4.4及以上版本支持
特点
- 默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
- 父级加了这条属性，子级的float、vertical-align就会失效
- 如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性
容器属性（父元素样式） 具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识。
- flex-direction：子元素排列方向（主轴的方向，如果设置了column，则意味着主轴旋转了90度）
- flex-wrap：换行方式
- flex-flow：以上两种方式的简写
- justify-content：水平对齐方式（子元素在主轴上的对齐方式）
- align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）
- align-content：多行垂直对齐方式（多根轴线的对齐方式）
项目属性（子元素样式）
- order：排列位置 //如果有两个的值是相等，按书写顺序排列
flex-grow：扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数
默认为0，即如果存在剩余空间，也不扩展
剩余空间
剩余空间=父级的宽度-所有子元素的宽度和
注意：如果没有设置初始宽度，也没有内容，则默认为0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度。子元素宽度计算公式 子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的flex-grow属性值之和*子元素的flex-grow属性值+子元素初始宽度flex-shrink：收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数
默认为1，如果给个0的话，就不会收缩
超出空间
超出空间=所有子元素的宽度和-父级的宽度子元素宽度计算公式 1、算出超出空间，所有子元素的宽度和-父级的宽度 2、子元素的初始宽度*子元素的flex-shrink值 3、算出第二步所有结果的和 4、每个子元素的第二步/第三步*第一步 5、子元素的初始宽度-第四步- flex-basis：元素的大小
- flex：以上三个属性的简写
- align-self：单独的垂直对齐方式（交叉轴方向上）