前端页面的移动端适配

前言

移动端高度适配一般使用px单位即可。

本文着重说明如何实现移动端宽度的适配：方法是使用CSS3新增的一个相对单位rem来实现的。

rem是一个相对于HTML 根元素的长度单位，可以做到只修改根元素就成比例地调整所有尺寸大小 * 详解

前端页面使用rem作为尺寸单位，根据移动设备屏幕尺寸大小不同动态设置HTML根元素的font-size，这样就能够实现页面内容随着屏幕尺寸大小进行成比例的变化。

步骤

1. 选择一款机型作为开发基准

我一般会选择iPhone6/7/8：

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>

最后编辑于：2020.02.12 13:24:43