移動端頁面適配，rem佈局

移動端頁面適配

 

em 根據元素自身的字體大小來計算本身的尺寸

rem root em 根據根節點(html)的字體大小來計算本身的尺寸

                  

適配: 各個移動設備，分辨率大小不一致，使咱們的頁面在各類分辨率下都顯示無缺(等比的縮放);

根據屏幕的分辨率

動態的設置html的字體大小，來達到頁面等比縮放的功能

 

注意：保證html最終算出來的字體大小 不能小於 12

 

 

在最開始先設置一段js代碼，得到屏幕寬度，這段js優先於任何css和js

<script>

(function() {

                   var html = document.querySelector("html");

                   var width = html.getBoundingClientRect().width;

                   html.style.fontSize = width / 16 + "px";

                   //  width / 16  html的字體大小 = 屏幕寬度的16分之一 = 1rem

                   //  270 /

                   //console.log(html.getBoundingClientRect());

         })();

</script>

html.getBoundingClientRect().width; //得到屏幕寬度

 

 

像素比

alert(window.devicePixelRatio); //像素比 像素比爲2 用兩個像素的大小去顯示 1px的內容

// 最好設計圖的寬度都保持在 750以上