小谈移动端自适应

多的话就不说了，反正WebApp现在是很火，PC端网页已经远远不能满足大家的胃口，今天来谈谈如何制作一个WebApp（也可称之为自适应Web）。

现在一般有两种方式：

当然我们开头的meta标签是不能少的。

<metaname="viewport"content="width=device-width, initial-scale=1.0"/>

1.采用CSS3的@media媒体查询（这种方式较简单粗暴,也就是传说的流式布局）

要点

（1）宽度都用百分比来设置

（2）对要自适应的Div设置float属性（其实原理就是利用float属性当宽度不够而换行的特性）

（3）用@media查询对不同屏幕尺寸设置样式

下面贴出自己做的一个小demo：

效果：

Iphone5下：

Ipad下：

这样就实现了简单的自适应，但是这样做有很大的缺陷：

（1）.在大屏手机会觉得页面稍小，小屏手机页面稍大

（2）.如果做复杂一点的页面@media查询会非常的多

（3）.Dom上的元素如果要和背景图片结合位置不好确定。

下面就是第二种，现如今最火的一种做法：

基于Rem的适配方法，动态改变1rem的值（html font-size的值）来达到适配。这种适配方法也有两种类型，分别以网易和淘宝为例。（其实差别不大）

在非根元素下1rem的值相当于根元素的font-size大小。rem适配的原理是等比缩放！！！一般根据宽度

网易流程如下：

（1）确定基础稿，假设基础稿宽度为640px。

（2）在640px的基础稿下，假设一个按钮的宽度为150px，刚才我们说了，rem适配的原理是等比缩放。那么怎么去等比，我们就借助rem这个媒介，我们还提到一般是根据宽度去做缩放，那么我们把rem的计算和宽度建立上联系不就行了？网易的做法是在计算1rem值的时候根据屏幕宽度比来计算。

（3） 我们设置在640px的基础稿下1rem = 100px。那么这个按钮的宽度就应该为1.5rem（为什么设置100？其实任何值都行，只是100方便与与计算）。

（4）那么这个视觉稿做成的网页在其他屏幕上怎么去适配呢？我们不知道其他屏幕到底多大呀~这就是我们设置基础稿的原因。再一次强调rem的原理是等比缩放。那么在640的屏幕下1.5rem为按钮的宽度，那么当网页到了320px的屏幕下呢？根据等比缩放原则=》640/320 = 100 / 当前页面1rem的值。

代码实现也就是：

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

这样在没个页面安装基准稿等比缩放算出来的1rem的值就能达到页面的适配

效果图：

ipad下：

iphone6plus上：

可以看到的是这套方法是完全可行的，我们的根font-size会根据不同的屏幕宽度而实现自适应，淘宝的和这个一个道理我就不再做demo了。

另外个人推荐使用网易的方法，不用去复杂的转换rem。

淘宝流程如下：

（1）前期步骤和网易一样都是设置先设置基准稿

（2）淘宝还考虑了dpr的影响，一般基准稿是基于iphone的，而iphone这种retina屏幕的dpr为2

（3）淘宝的做法就是动态的去设置meta来缩放，以达到高清适配的目的

            meta.setAttribute('content','initial-scale='+1/dpr +', maximum-scale='+1/dpr +', minimum-scale='+1/dpr +', user-scalable=no');这里对页面进行了缩放，就会涉及到图片失帧的问题，所以得用2倍图3倍图写css hack解决，还有一点就是页面根据dpr做了缩放，所以在计算1rem的值的时候得乘上dpr值

（4）那么这里计算rem与网易的区别就出来了，网易是在计算1rem值的时候根据屏幕宽度比来计算，而淘宝的1rem值都是屏幕宽的10份，它在计算1rem的值的时候其实是将元素宽度和屏幕宽度建立联系来计算的。所以淘宝的高清适配方案放在网易上也是可行的。

            var dpr = window.devicePixelRatio || 1, scale = 1 / dpr;  

            var docEle = document.documentElement;

            var deviceWidth = docEle.clientWidth;

            var metaEle = document.querySelector('meta[name="viewport"]');

            metaEle.setAttribute('content', 'width=' + dpr * deviceWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

            docEle.setAttribute('data-dpr', dpr);     //css hack

            if (deviceWidth > 750) deviceWidth = 750;

            document.documentElement.style.fontSize = deviceWidth * dpr / 7.5 + 'px';

（5）接下来就是计算1rem的值，也就是 基准值（1rem=clientwidth*dpr/10。这里说过任何值都行）

（6）之后布局所用到的位置单位全部用Rem代替（这就和网易的不同了。若有一个750px的div，假设我们算出来的1rem的为50，那么该div的宽度就该写为15rem）转换公式rem=px/ 基准值，这里如果你自己用这种方法的话会发现当你要将px转化为rem时，计算会很麻烦，但是前端构建的强大，less，sass能轻松解决。

以上只是楼主的一些个人体会，肯定有很多不足，欢迎批评指正