1.rem 適配
獲取根元素html標簽
用html.getBoundingClientRect().width獲取他的視口大小
設置根元素的字體大小為視口大小/16
這樣在任何一個設備上1rem的大小都是等比的
(function(){
??????????? var html = document.querySelector("html");
??????????? var width = html.getBoundingClientRect().width;
??????????? html.style.fontSize=width/16+"px";
})();
2.viewport適配
//獲取圖片的寬度
??????? var tragetW =640;
//獲取整個視口的寬度
??????? var width = document.documentElement.clientWidth;
//定義一個比例 視口的寬度除以設計圖的寬度
??????? var scale = width/tragetW;
//動態(tài)創(chuàng)建meta標簽，使默認的縮放比例為這個比例
??????? var metaNode = document.querySelector("meta[name='viewport']");
??????? metaNode.setAttribute("content","width=device-width,initial-scale="+scale);
3.一物理像素適配
???(function(w){
??????????????? //拿到對應設備的像素比? 如果不存在則指定為1
??????????????? var dpr = window.devicePixelRatio||1;
??????????????? var scale = 1/dpr;
??????????????? var rem = document.documentElement.clientWidth*dpr/16;
??????????????? //實現(xiàn)了頁面所有元素的縮放
??????????????? var metaNode = document.querySelector("meta[name='viewport']");
??????????????? metaNode.setAttribute("content","width=device-width,initial-scale="+scale );
??????????????? //將布局元素放大回來
??????? //??????? var html = document.querySelector("html");
??????? //??????? html.style.fontSize=rem+"px";
??????????????? var styleNode = document.createElement("style");
??????????????? styleNode.innerHTML="html{font-size:"+rem+"px!important}";
??????????????? document.head.appendChild(styleNode);
??????????????? w.dpr=dpr;
??????????????? w.scale=scale;
??????????????? w.rem=rem;
? ? ?})(window)
