多的话就不说了，反正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 = 16px。当然这个可以改变
网易流程如下：
（1）拿到视觉稿，用viewport获取的宽度除以视觉稿的宽度再乘100得到根font-size的大小（font-size=clientwidth/640*100+'px'——640就是你的视觉稿的宽度）
（2）之后布局所用到的位置单位全部用Rem代替，例如视觉稿上的div的宽度为200px，则就写成2rem。为什么是这样，因为我们之前首先确定了640px为基准稿，以font-size = 100为参照，然后我们算出基准稿的body宽度为deviceWidth/100 = 6.4rem，这个值是基准。那么假设当在dw = 320px的设备上，那么这个时候其font-size = dw/6.4。
效果图：
ipad下：
iphone6plus上：
可以看到的是这套方法是完全可行的，我们的根font-size会根据不同的屏幕宽度而实现自适应，淘宝的和这个一个道理我就不再做demo了。
另外个人推荐使用网易的方法，不用去复杂的转换rem。
淘宝流程如下：
（1）利用viewport获取宽度。
（2）计算1rem的值，也就是 基准值（1rem=clientwidth*dpr/10。不一定分为十份，自己决定）
注：什么是dpr。这篇文章写得非常清楚，可以看看移动端适配基本概念和方法
（3）之后布局所用到的位置单位全部用Rem代替（这就和网易的不同了。若有一个750px的div，假设我们算出来的1rem的为50，那么该div的宽度就该写为15rem）转换公式rem=px/ 基准值，这里如果你自己用这种方法的话会发现当你要将px转化为rem时，计算会很麻烦，所以推荐用sublime text。里面有插件可以自动转换。
以上只是楼主的一些个人体会，肯定有很多不足，欢迎批评指正
网友评论