html5+css3中移动端布局页面自适应解决方案

　　先引入一个js插件remScale.js

　　不知道csdn怎么上传文件，就把js代码复制在下面：自己保存一下，存到js文件里面即可，

　　写移动端页面时，把这个文件引入即可

　　这段代码的核心意思是：如果页面的宽度超过了720px，那么页面中html的font-size值恒为100px,否则的话，html中的font-size的大小为100*（当前的页面宽度/720）

　　我看百度上人家都是设置640px或750px，但是我们老师设置的是720px，经过实践证明，720px也可以用，没啥问题

　　对应手机屏幕来说，720px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。这里的px是css逻辑像素（在下面给大家补充什么是设备像素，逻辑像素，css像素）

　　设备像素是设备的固有属性，屏幕的设备分辨率是1920*1200（单位：设备像素）

　　逻辑像素也叫设备独立像素，与css像素一样是一种虚拟的像素，它是操作系统定义的一种像素单位，应用程序将逻辑像素告诉操作系统，操作系统再将逻辑像素转为设备像素。

　　可以通过操作系统的分辨率设置来改变设备独立像素的大小，但是在前端开发中可以当作定制，因为没人会闲着没事去频繁改变操作系统分辨率。

　　css像素是一个不确定的物理像素，它是根据它所在的机型设备而决定的。在css中使用的px都是指css像素，如width:200px.css像素的大小，很容易变化的。当我们**缩放页面的时候，元素的css像素数量不会改变，****改变的是每个css像素的大小，**也就是说width:200px的元素在缩放200%以后，宽度仍然是200像素，只不过每个css像素的宽度和高度变为原来的2倍。如果原来的元素宽度为200个设备独立像素，缩放后就变成400个设备独立像素了，但是css像素宽度始终是200

　　参考了：

　　响应式设计——理解设备像素、设备独立像素和css像素

　　设置font-size值的原因是：rem就是根元素（即html）的字体大小，html中所有标签样式只要是涉及到尺寸的（height,width,font-size,padding,margin等）都可以使用rem布局。

　　如果把html的font-size设为20px，前面所说rem就是html的字体大小，那么1rem就是20px。可以算出1px就是0.05rem.

　　那么宽60像素，高40像素的元素样式就可以设置为：

　　width:3rem;

　　height:2rem;

　　so,这样设置的话，要素宽55px，高37px，就得一点点计算了，是不是好麻烦。

　　所以：把font-size值设置为100px，是不是很爽。此时1rem=100px.

　　那么上面的宽55px，高37px就可以设置成

　　width:0.55rem;

　　height:0.37rem;