移動端佈局的一些設置（在viewport裏設置使頁面顯示相同寬度，顯示相同像素大小）

viewport（視口）

1. 具體數值（不設置時默認爲980 ，部分安卓手機不支持設置成具體數值）
2. width=device-width 和設備寬度保持一致
3. user-scalable=no 是否容許用戶縮放no/yes（iOS10不支持 近乎無解）
4. initial-scale 初始縮放比例
5. minimum-scale 最小縮放比例
6. maximum-scale 最大縮放比例

頁面寬度

頁面寬度=device-width/scale

在頁面中實現等比像素的JS代碼：

<!--利用頁面的像素比來進行頁面的縮放 顯示等比像素 但每一個設備不是相同寬度-->
<script type="text/javascript">
(function(){
    var meta = document.createElement("meta"); 
    var scale = 1/window.devicePixelRatio;
    meta.name = "viewport";
    meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale;
    document.head.appendChild(meta);
})();   
</script>

在頁面中實現相同寬度顯示的JS代碼：

<!--頁面寬度適配 顯示相同寬度 但每一個設備所顯示的像素大小不同-->
<script type="text/javascript">
(function(){
    var meta = document.createElement("meta");
    var width = window.screen.width; 
    var targetWidth = 320;
    var scale = width/targetWidth;
    meta.name = "viewport";
    meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale;
    document.head.appendChild(meta);

})();   
</script>

window.devicePixelRatio 像素比

[不可改變，只能獲取]

1px的內容放大N倍顯示

[像素比爲2 整個頁面的內容就被放大兩倍顯示]

分辨率：屏幕圖像的精密度，是指顯示器所能顯示的點數的多少

分辨率越高，像素越大，在相同寬度下，屏幕所能顯示出來的東西越多，可是顯示出來就越小。

移動端佈局

• 1em=當前元素的一個文字大小
• rem(root em) 1rem=html的一個文字大小
• [rem佈局原理簡單的來講就是把頁面虛擬成一個網格,每行的格子的大小都是一致的，每行的格子也是固定的，咱們在設置元素的尺寸的時候，不在固定使用PX，而是設置佔了多少格格子,而後在根據頁面寬度的不一樣，來修改每一個格子的大小，從而使頁面等比的縮放. ]
• 經過js獲取頁面的寬度

<script type="text/javascript">
(function(){
    var html = document.documentElement;//獲取到HTML
    var width = html.clientWidth// 獲取html的寬度
    //html.style.fontSize html的字體大小
    html.style.fontSize = width/10 + "px"; 
    //console.log(width);   
    // 1rem = 1個格子的大小
})();
</script>

• [ 使用rem時，注意頁面接受的最小字體是12px,因此通常不會分超過25個格子,通常要適配最小的寬度是320 ]