使用rem实现移动端自适应布局

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。而em是相对于当前对象文本的字体尺寸。
rem单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。如p{font-size: 16px;font-size:1rem;}
rem布局的具体用法，假设移动端的设计搞为640px的

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 640 ? clientWidth : 640;  //页面大小超过640px则最大设置为640px
document.documentElement.style.fontSize = clientWidth / 640 + 'px';

这时候在页面的640px的布局html根字体大小为1px; 50rem=50px;

写移动端上的页面时，在中增加这行代码，让网页的宽度自动适应手机屏幕的宽度；解决网页宽度与手机屏幕不一致的问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />