移动端自适应所有尺寸屏幕的方法（适用所有尺寸屏幕，PC端也可以用）

先说代码，以后再解释：

移动端必须代码：

<meta name="viewport" content="width=device-widht,initial-scale=1.0,suer-scalable=1.0,maximum-scale=1.0,minimum-scale=1.0">

js动态计算rem代码：（此代码适配所有手机端）

1. 750的设计稿：

(function(){
function w () {
var r = document.documentElement;
var a = r.getBoundingClientRect().width;
if (a > 750) {
a = 750;
};
rem = a / 7.5;
r.style.fontSize = rem + 'px';
};
var t;
w();
window.addElementListener('resize',function(){
clearTimeout(t);
t = setTimeout(w,300)
},false);
})();

2.   任意尺寸的设计稿（自适应）

假设设计稿的宽度为XXXpx；

(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
b.style.fontSize = (a / XXX) * 100+ "px";
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, 300);
});
a();
})();

解释一下第二个代码中的  b.style.fontSize = (a /XXX) *100+ "px";

假设a=800,XXX=1000,也就是设计稿的宽度为1000px，（移动端的）屏幕宽800px;

要对应比例还要适配移动端，那么，设计稿上的1px在移动端上就是0.8px；这个0.8是(a /XXX)计算得来的。

而总不能每次测量的长度都乘以0.8吧？这岂不是要累死？这时，就用到了rem。

给html一个font-size:0.8px;这时移动端的1rem就等于设计稿的1px；

而Chrome浏览器，最小字体不得小于12px；

把字体放大100倍即可。就是：(a /XXX)*100

设置html   font-size: (a /XXX)*100 px;就可以来什么屏适应什么屏，pc浏览器打开这种网页的话网页尺寸会随着浏览器窗口宽度的改变而改变