web-移动端布局实现自适应

重在理解原理

rpx布局

把页面按比例分割750份，不同分辨率的设备每一份占有的像素不一样，来达到自适应 1rpx=window.innerWidth/750

微信的rpx，用过rpx都知道，只要写rpx单位，就可以达到完美适配，不必担心它在不同分辨率的设备上适配情况，实际上布局呈现是一致的，rpx实际上就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），通过rpx，只需要根据750的设计稿写代码即可，因为在不同的设备上1rpx就是会呈现不同的像素,换句话说就是页面的的750份，每一份占有的像素不一样，来达到自适应。

html5要适应各种分辨率的移动设备，使用rem这样的尺寸单位

font-size值是手机deviceWidth跟设计稿竖着的横向分辨率的比例值 的 100倍

rem=根元素*font-size;
在我看来rpx和rem的原理是一样的，他们都是把设备的宽等分成X份，(这里的X份其实就是设计稿竖着的横向分辨率)而每一份所占的像素是根据设备宽来的。这边把这个每一份的像素设置成了根元素的字体值，借助他去动态改变rem;只是说这边有个桥梁就是根元素的字体大小。

举个例子

假设竖着的设计稿他横着的宽度是750像素,iphone6的deviceWidth是375px。font-size=deviceWidth/设计稿宽；那font-size=375/750=0.5px,此时根元素的font-size=0.5px;这样很小，会出问题的，后面说，先跟着这个逻辑走。UI给的设计稿如果宽是20px,那么你就可以写width:20rem,rem单位就会根据（当前手机deviceWidth/设计稿竖着的横向分辨率这个比例其实就是html下的font-size=0.5）×20rem=10px;【解释下：不同设备的根元素下的font-size不同*相同的remc像素=得到自适应的px像素】来达到自适应；但是有个问题，浏览器这么小的字体0.5px大小的字体是不认的，因此不得不把这边放大100倍。因此我们输入width:0.2rem。缩小了100倍。所以我们只要拿着设计稿把px统一写成rem,数值均缩小100倍就可以在不同分辨率的设备呈现一致的布局。

font-size不能通过媒体查询去设置，因为他并没有实现类似百分比的占有率去自适应，他是以一个不那么细腻范围去适应，其实他也是原理一样的，只不过，他只是分了那么几个设备类型，所以会造成问题的，如下代码，这样划分就会呈现弊端，说得通俗易懂点，这边把一个min-width:321px-max-width:375px这样一个范围的设备的根元素都设置成了11px。这样就有点不完美了。

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

所以这边font-size通过js去设置，这样无论什么样子的设备，我font-size是通过设备的宽度/设计稿的宽度去等比例设置的。来达到自适应。
在dom ready以后，通过以下代码设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是6.4那么 document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + ‘px’;
视口要这样设置

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">