先說程式碼，以後再解釋：

移動端必須程式碼：

<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)