Wap，rem起大作用了！

引言

 

        在长城工作了一个半月时间，主要负责的项目是二手车安心换。在完成PC端的功能之后，听说要做Wap站的，

之前没有做过，所以稍作了解之后发现很简单~

        先说一下Web，Wap和App的区别和联系。

        Web，很明显，就是在电脑端通过浏览器访问从而获取资讯的方式。优点是获取的信息丰富，显示的内容也相

对于Wap和App来说要复杂一些。缺点是携带不方便，也因为内容丰富所以很容易迷失在信息海洋里。

        App，在手机上的一个个小图标就是App方式的。没做过App方面的开发，所以就不乱说了。

        Wap，入口就是手机端的浏览器，但是浏览的尺寸是跟App页面类似的，自动适应移动设备的尺寸大小。而且相

对于Web来说，携带方便，内容突出；相对于App来说，内容占用小，一个二维码（链接）就OK。

Wap的自适应实现

        

       说了这么多，再说如何实现wap的自适应功能。其实很简单，我们先捋一捋。

       移动设备，就目前而言是发展的很快的，而且新的款式，新的尺寸一直在更新换代。像苹果，就从iphone 5到

iphone 6 plus，外加ipad（谷歌浏览器调试的尺寸和类型），如果实现自适应，首要问题是控制变量，这里唯一的变

量就是各个设备的尺寸，所以先获取设备的屏幕尺寸！

var windowWidth = html.clientWidth;

        然后根据屏幕尺寸设置整个页面尺寸显示的基础值：

(function () {
    document.addEventListener('DOMContentLoaded', function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = windowWidth / 6.4 + 'px';
    }, false);
})();

      然后就是rem的使用了。

      如果不知道rem是什么的话，建议看看这个：web app变革之rem

      网上有很多人问rem和px的计算方式，简直就是鬼扯！rem是在你设置的基础值上的单位，px是浏览器盒子模型默

认的单位，所以二者没有关系的。

      rem的使用方法跟px是一样的，都是单位嘛，所以。。。简单！下边是一小段CSS样式：

.banben{
	width: 100%;
	height: 2.85rem;
	background-color: #f5f5f5;
	text-align: center;
	border-bottom: 0.02rem solid #dddddd;
}
.banben img{
	float: left;
	width: 1.06rem;
	margin: 0.53rem;
}
.banben span{
	font-size: 0.18rem;
	color: #aaaaaa;
}	

         所以使用没有问题了吧！