最近寫(xiě)第三個(gè)移動(dòng)端 H5 的項(xiàng)目了，準(zhǔn)備記錄下自己在 H5 項(xiàng)目中的一些實(shí)踐探索。移動(dòng)端 H5 與 PC 端開(kāi)發(fā)最大的區(qū)別之一，大概就是 響應(yīng)式布局 問(wèn)題。

那么下面我們來(lái)聊聊移動(dòng)端響應(yīng)式布局，了解他的來(lái)龍去脈，對(duì)現(xiàn)有的最佳解決方案探索。

問(wèn)題

全文將圍繞下面幾個(gè)問(wèn)題進(jìn)行論述和展開(kāi)：

寫(xiě)移動(dòng)端H5 相關(guān)頁(yè)面，相比 PC 端有哪些值得注意的點(diǎn)？

關(guān)于H5 響應(yīng)式布局有哪些解決方案？

什么是 rem？如何在項(xiàng)目中完美使用它？

vh/vw 是最佳解決方案嗎？它有什么優(yōu)勢(shì)和缺陷 大型開(kāi)源庫(kù)里面常用解決方案是什么？

怎樣快速搭建一套移動(dòng)端布局解決方案？

由來(lái)

概念

什么是 H5 技術(shù)？

H5 這個(gè)命名本身是一個(gè)很不討巧的命名，咋一眼看上去認(rèn)為 HTML5，或者第 5 級(jí)標(biāo)題的標(biāo)簽，對(duì)一些造成一些不小的誤解。

比如：我的一個(gè)某后端同事，談?wù)摰?H5 很簡(jiǎn)單，HTML 之前我也學(xué)過(guò)一些，以后要是你請(qǐng)假，我來(lái)幫你寫(xiě)。

我是一臉蒙蔽，H5 === HTML?

再看看，搜索引擎中H5是什么？（引用來(lái)自谷歌詞條第一頁(yè)）

如此看來(lái)，將 H5 視作 HTML 的大有人在，而 H5 這個(gè)概念只在中國(guó)特有，所以對(duì)外國(guó)人來(lái)說(shuō)他們也認(rèn)為是 HTML， 所以，對(duì)于外國(guó)人和非這個(gè)領(lǐng)域的人來(lái)說(shuō)，他們存在一樣的誤解。

目前的 H5 算是一個(gè)比較大的概念了，我認(rèn)為的 H5 技術(shù)是 一系列移動(dòng)端 web 前端技術(shù)的集合 大致用一個(gè)韋恩圖表示如下

我們這里只談 web 前端中 H5 技術(shù)，H5 技術(shù)本身是用于 移動(dòng)端的 web 網(wǎng)頁(yè) 。由于App本身有個(gè) “ webview ” 的容器，在容器里可以運(yùn)行 web 前端相關(guān)代碼，由此 H5 和原生 App 結(jié)合又衍生出來(lái)了 Hybrid App 技術(shù) 。

Hybrid App 技術(shù)大致原理

這是我給公司同事普及 H5 知識(shí)繪制的圖像。

移動(dòng)端 web 和 PC web 的區(qū)別

PC 端我們是怎么布局的呢？ 一般采用兩種方案，一種是 min-width 限制最小的寬度，瀏覽器寬度小于 min-width 就直接滾動(dòng)。另外一種呢，就是留白。設(shè)置頁(yè)面一個(gè)基礎(chǔ)寬度，超出的部分留白。

但是這兩種解決方案在移動(dòng)端可行嗎？

移動(dòng)端手機(jī)的寬度，大多不一致，而且沒(méi)辦法進(jìn)行窗口的縮放。讓移動(dòng)端產(chǎn)生滾動(dòng)，體驗(yàn)更加糟糕，更別說(shuō)和原生 app 性能相比較，基本頁(yè)面展示體驗(yàn)就很差了。

那么留白呢？ 更不可行了，手機(jī)設(shè)備本身寬度就小，再留白就基本看不了什么了。

所以為了讓這種 web 能夠像原生 app 一樣的體驗(yàn)，就出現(xiàn)了 H5 技術(shù)。進(jìn)一步衍生了 Hybird , 雖然比不上 app 性能，但是在 熱更新 上占有絕對(duì)優(yōu)勢(shì)，有著原生無(wú)法替代的地方。

下面我們來(lái)就來(lái)實(shí)踐下 H5 最基本的技術(shù)之一 移動(dòng)端響應(yīng)式布局 。

實(shí)踐

解決方案一：rem + pxToRem 概念

css 中用于計(jì)量的單位有兩種，一種是 絕對(duì)單位 ，另一種是 相對(duì)單位

絕對(duì)單位

對(duì)于絕對(duì)單位，一般來(lái)說(shuō)常用的也就 px， 其他的可能打印需要用到

相對(duì)單位

對(duì)于相對(duì)單位來(lái)說(shuō)， em 和 rem 屬于一對(duì)， vw 和 vh屬于一對(duì)。

前一對(duì)相對(duì)于 字體大小 ，區(qū)別在于 rem 相對(duì)于 根字體 ，對(duì)于我們控制整體的大小相對(duì)容易些，所以我們可以使用它來(lái)控制整個(gè)頁(yè)面的縮放。

后一對(duì)，相對(duì)于視窗的大小，這個(gè)將在下一個(gè)節(jié)中發(fā)揮主要作用。

原理

• 監(jiān)聽(tīng)屏幕視窗的寬度，通過(guò)一定比例換算賦值給 html 的 font-size 。此時(shí)，根字體大小就會(huì)隨屏幕寬度而變化。
• 將 px 轉(zhuǎn)換成 rem , 常規(guī)方案有兩種，一種是利用 sass / less 中的自定義函數(shù) pxToRem ，寫(xiě) px 時(shí)，利用 pxToRem 函數(shù)轉(zhuǎn)換成 rem 。另外一種是直接寫(xiě) px ，編譯過(guò)程利用插件全部轉(zhuǎn)成 rem 。這樣 dom 中元素的大小，就會(huì)隨屏幕寬度變化而變化了。

 實(shí)現(xiàn)

動(dòng)態(tài)更新根字體大小

const MAX_FONT_SIZE = 420

// 定義最大的屏幕寬度
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
  html.style.fontSize = fontSize + 'px'
})

px 轉(zhuǎn) rem

pxToRem 方案一

$rootFontSize: 375 / 10;
// 定義 px 轉(zhuǎn)化為 rem 的函數(shù)
@function px2rem ($px) {
    @return $px / $rootFontSize + rem;
}

.demo {
    width: px2rem(100);
    height: px2rem(100);
}

pxToRem 方案二

vue-cli3 中配置 裝 postcss-pxtorem 插件就可以了，其他平臺(tái)大致差不多

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = { 
  // ...
  css: {
    sourceMap: true,
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
}

點(diǎn)擊快速配置 H5 項(xiàng)目工程

繼續(xù)探索postcss-pxtorem 插件源碼，查看它實(shí)現(xiàn)的原理

function createPxReplace (rootValue, unitPrecision, minPixelValue) {
    return function (m, $1) {
        if (!$1) return m;
        var pixels = parseFloat($1);
        if (pixels < minPixelValue) return m;
        var fixedVal = toFixed((pixels / rootValue), unitPrecision);
        return (fixedVal === 0) ? '0' : fixedVal + 'rem';
    };
}

px 變換成 rem 主要是這個(gè)函數(shù)，當(dāng)然里面有很多可配置的參數(shù), 核心原理和我們方案一差不多，方便在于，不需要每次寫(xiě) px 都要加上一個(gè)函數(shù)，代碼也清晰很多

是不是所有元素 px 都要轉(zhuǎn)換成 rem 呢？，那可不一定哦， border 中的 px 不應(yīng)該轉(zhuǎn) rem，涉及到另外一個(gè) 1px 的問(wèn)題，上一篇文章詳細(xì)論述過(guò)，避免 px 轉(zhuǎn) rem ，將 border 中的 px 大寫(xiě)成 PX/Px/pX

1px 適配問(wèn)題請(qǐng)移至吃透移動(dòng)端 1px

解決方案二：vh + vw

原理

vw 相對(duì)于視窗寬度的單位，隨寬度變化而變化。由此看來(lái)，方案一其實(shí)是方案二的一種 Hack, 通過(guò)使用監(jiān)聽(tīng)實(shí)現(xiàn)了方案二的效果

實(shí)現(xiàn)

與 rem 類似做法，直接使用postcss-px-to-viewport 插件進(jìn)行配置, 配置方式也是和 postcss-pxtorem 大同小異

我們看看插件的原理是不是也是一樣的

function createPxReplace(opts, viewportUnit, viewportSize) {
  return function (m, $1) {
    if (!$1) return m;
    var pixels = parseFloat($1);
    if (pixels <= opts.minPixelValue) return m;
    var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
    return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
  };
}

果然呢，連方法名、變量名、代碼邏輯，都一摸一樣哈哈哈，誰(shuí)抄誰(shuí)，我就不指出來(lái)啦 - -

其他解決方案