前言
移动端高度适配一般使用px单位即可。
本文着重说明如何实现移动端宽度的适配：方法是使用CSS3新增的一个相对单位rem来实现的。
rem是一个相对于HTML 根元素的长度单位，可以做到只修改根元素就成比例地调整所有尺寸大小 * 详解
前端页面使用rem作为尺寸单位，根据移动设备屏幕尺寸大小不同动态设置HTML根元素的font-size，这样就能够实现页面内容随着屏幕尺寸大小进行成比例的变化。
步骤
1. 选择一款机型作为开发基准
我一般会选择iPhone6/7/8：
image
2. 设置HTML 根元素的font-size
为了简化运算，我将根元素的font-size设为100px。此时1rem = 100px，后续内容全部使用rem作为尺寸单位。设计稿给的尺寸一般都是以px为单位，根据设计稿给的尺寸转换成rpm即可。
html {
font-size: 100px;
}
3. 将手机浏览器布局视口设置成屏幕的宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
原理详见：移动端适配 — 细节补充（一）、移动端适配 — 细节补充（二）
4. 用JS动态设置根元素的font-size
在JS代码中首先拿到当前设备屏幕的尺寸，然后计算当前屏幕尺寸是基准开发机型的几倍，然后根据倍数来设置根元素的font-size的大小：
//使用IIFE（立即调用函数）实现在js加载时对根元素的font-size赋值
(function (doc, win) {
//1.获取根元素
let docEl = doc.documentElement,
//2.判断移动端屏幕发生变化时发生的事件（是翻转屏幕还是只是调整了浏览器窗口大小）
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//3.获取当前设备屏幕的尺寸，计算根元素的font-size的大小并赋值
recalc = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth / 375)*100 + 'px';
};
//4.对屏幕发生变化时发生的事件进行监听，若发生变化就重新计算font-size
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
至此，已经实现了移动端适配的效果。
Vue项目中如何使用
使用vue-cli搭建好项目框架后,在目录结构的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>
网友评论