前端頁面適配移動端常用方案

本文寫作順序是按照實際編寫移動端適配的順序編寫的。
想要充分理解，需要童鞋們有rem，像素，媒體查詢，的基礎知識。
若順序閱讀理解較爲困難。可以按照標題3、2、1的順序閱讀。
建議先看：適配移動端解決思路

1.js添加如下三行代碼——解決設備像素同邏輯像素不同的問題

let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scaleable=no">`;
document.write(text);

解釋以上代碼、

• let scale = 1.0 / window.devicePixelRatio：計算頁面縮放比例
• window.devicePixelRatio：獲取設備像素比DPR
• let text：解決物理像素同邏輯像素不同的問題
• document.write(text)：將text寫入html
• 物理像素同邏輯像素詳細解釋見：設備（物理）像素和CSS（邏輯）像素

2.js動態計算設備視口每份的大小

document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";//可視區域一份的大小。

7.5的由來見：標題3
1.計算設計圖片每一份大小: 750 / 7.5 = 100px
2.計算當前屏幕每一份大小: 當前屏幕寬度 / 和設計圖相同的分數 = 當前屏幕每一份大小

3.css中使用rem計算元素大小

舉例：top:0.8rem：
0.8rem計算方法：80/100rem：原始元素大小/原始圖片每份大小目標屏幕每份大小
原始圖片每份大小：設：設計圖片整體寬爲750px，一份100px，即爲7.5份。
瞭解rem：前端開發常用單位