前言
移動端高度適配一般使用px單位即可。
本文著重說明如何實現(xiàn)移動端寬度的適配：方法是使用CSS3新增的一個相對單位rem來實現(xiàn)的。
rem是一個相對于HTML 根元素的長度單位，可以做到只修改根元素就成比例地調(diào)整所有尺寸大小 * 詳解
前端頁面使用rem作為尺寸單位，根據(jù)移動設(shè)備屏幕尺寸大小不同動態(tài)設(shè)置HTML根元素的font-size，這樣就能夠?qū)崿F(xiàn)頁面內(nèi)容隨著屏幕尺寸大小進行成比例的變化。
步驟
1. 選擇一款機型作為開發(fā)基準
我一般會選擇iPhone6/7/8：
2. 設(shè)置HTML 根元素的font-size
為了簡化運算，我將根元素的font-size設(shè)為100px。此時1rem = 100px，后續(xù)內(nèi)容全部使用rem作為尺寸單位。設(shè)計稿給的尺寸一般都是以px為單位，根據(jù)設(shè)計稿給的尺寸轉(zhuǎn)換成rpm即可。
html {
font-size: 100px;
}
3. 將手機瀏覽器布局視口設(shè)置成屏幕的寬度
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
原理詳見：移動端適配 — 細節(jié)補充（一）、移動端適配 — 細節(jié)補充（二）
4. 用JS動態(tài)設(shè)置根元素的font-size
在JS代碼中首先拿到當前設(shè)備屏幕的尺寸，然后計算當前屏幕尺寸是基準開發(fā)機型的幾倍，然后根據(jù)倍數(shù)來設(shè)置根元素的font-size的大?。?/p>
//使用IIFE（立即調(diào)用函數(shù)）實現(xiàn)在js加載時對根元素的font-size賦值
(function (doc, win) {
//1.獲取根元素
let docEl = doc.documentElement,
//2.判斷移動端屏幕發(fā)生變化時發(fā)生的事件（是翻轉(zhuǎn)屏幕還是只是調(diào)整了瀏覽器窗口大?。? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//3.獲取當前設(shè)備屏幕的尺寸，計算根元素的font-size的大小并賦值
recalc = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth / 375)*100 + 'px';
};
//4.對屏幕發(fā)生變化時發(fā)生的事件進行監(jiān)聽，若發(fā)生變化就重新計算font-size
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
至此，已經(jīng)實現(xiàn)了移動端適配的效果。
Vue項目中如何使用
使用vue-cli搭建好項目框架后,在目錄結(jié)構(gòu)的index.html文件中添加上述代碼即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Vue項目移動端適配</title>
<script>
(function (doc, win) {
let docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth / 375) * 100 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
