CSS邊用邊學(xué)（四）：移動(dòng)端頁(yè)面適配方案

目錄

  1. 概述
  2. meta viewport 縮放
  3. 媒體查詢(xún)
  4. 動(dòng)態(tài) rem
  5. vw, vh
  6. 總結(jié)

概述

移動(dòng)端頁(yè)面，亦即H5頁(yè)面、手機(jī)頁(yè)面、webview頁(yè)面等，常因需要適配市面上各種型號(hào)各種尺寸的移動(dòng)設(shè)備，而顯得繁雜。這里就對(duì)常用的移動(dòng)端頁(yè)面適配方案做出總結(jié)。

注意：本文暫不分析原理，其中涉及到的 visual viewport、layout viewport、物理像素、CSS像素、dpr（device pixel ratio）、dip（device independent pixels）、ppi（pixel per inch）等概念此處不談。

meta viewport 縮放

設(shè)置一個(gè)理想視口，何為理想？就是 visual viewport == layout viewport。在 HTML 中加入如下代碼：

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

設(shè)置理想視口，可以使得 layout viewport 與屏幕寬度 visual viewport 一樣大，DOM文檔主寬度即為屏幕寬度。

這種方法并不是完美方案，需要跟著大量調(diào)試CSS，并且一些特大尺寸的元素很難原比例展示，但是在移動(dòng)端頁(yè)面剛興起的時(shí)候不失為一種快捷的解決方案。

媒體查詢(xún)（Media Queries）

媒體查詢(xún)可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，這樣允許內(nèi)容在呈現(xiàn)上針對(duì)不同的輸出設(shè)備進(jìn)行裁剪，而不必改變內(nèi)容本身。它添加自CSS3。

先過(guò)一遍它的語(yǔ)法和常見(jiàn)屬性。

語(yǔ)法

<!-- link元素中的CSS媒體查詢(xún) -->
<!-- 所有的CSS都會(huì)下載，但滿足條件的時(shí)候才會(huì)執(zhí)行 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢(xún) -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

邏輯運(yùn)算符

  • and：and 關(guān)鍵字用于合并多個(gè)媒體屬性或合并媒體屬性與媒體類(lèi)型
  • not：not 操作符用來(lái)對(duì)一條媒體查詢(xún)的結(jié)果進(jìn)行取反
  • only：only 操作符僅在媒體查詢(xún)匹配成功的情況下被用于應(yīng)用一個(gè)樣式，這對(duì)于防止讓選中的樣式在老式瀏覽器中被應(yīng)用到，例如：
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
  • ,（comma）：媒體查詢(xún)中使用逗號(hào)分隔效果等同于 or 邏輯操作符。當(dāng)使用逗號(hào)分隔的媒體查詢(xún)時(shí)，如果任何一個(gè)媒體查詢(xún)返回真，樣式就是有效的

媒體類(lèi)型（Media types）

  • all：用于所有設(shè)備
  • print：用于打印機(jī)和打印預(yù)覽
  • screen：用于電腦屏幕，平板電腦，智能手機(jī)等
  • speech：用于屏幕閱讀器等發(fā)聲設(shè)備

媒體特征（Media features）

媒體特征描述了用戶代理（user agent）、輸出設(shè)備和運(yùn)行環(huán)境的具體特征。

媒體的特征非常多，這里就不一一列舉了，僅舉一些有代表性的例子。

（1）橫屏

@media (orientation: landscape) { ... }

（2）寬高比

@media (aspect-ratio: 9/18) { ... }  // 目前市面上最常見(jiàn)的比例

（3）最大寬度

@media only screen and (max-width: 420px) { ... }  // 市面絕大多數(shù)手機(jī)最大寬度

方案

通常用媒體查詢(xún)寫(xiě)響應(yīng)式布局，需要針對(duì)不同的屏幕尺寸寫(xiě)幾套CSS，每套的內(nèi)部各自調(diào)整。

一個(gè)例子：

上面的例子是一個(gè)簡(jiǎn)易的導(dǎo)航欄。此案例中，用 @media 另寫(xiě)了一套CSS，并且寫(xiě)了配套的HTML，就實(shí)現(xiàn)了在PC和屏幕寬度小于450px的移動(dòng)設(shè)備的響應(yīng)式布局。

缺點(diǎn)

  • 屏幕分辨率分區(qū)間：區(qū)間內(nèi)無(wú)法進(jìn)行區(qū)分，無(wú)法實(shí)現(xiàn)100%兼容，一般是用主流分辨率來(lái)進(jìn)行劃分
  • 額外的工作量：響應(yīng)式布局的工作都是需要開(kāi)發(fā)者去實(shí)現(xiàn)的，帶來(lái)了額外的開(kāi)放量
  • 不適合功能復(fù)雜的頁(yè)面：響應(yīng)式一般適合用于資訊類(lèi)頁(yè)面，功能復(fù)雜的網(wǎng)站對(duì)于頁(yè)面的整體排版和樣式要求較高（特別是對(duì)比PC和H5）

動(dòng)態(tài) rem

在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element” 。

也就是說(shuō)，rem 是一個(gè)長(zhǎng)度單位，是根元素 <html> 的字體大小。比如 <html> 默認(rèn)字體是16px，那么一個(gè) 2rem 的字就是 32px。

rem 和 em 的區(qū)別：

  • rem 以根元素字體大小為基準(zhǔn)
  • em 確切的講是一個(gè)大寫(xiě)字母 M 的寬度，以父元素字體大小為基準(zhǔn)

那么我們要做移動(dòng)端頁(yè)面適配，只需根據(jù)不同屏幕尺寸調(diào)整 <html> 的 font-size 即可。

rem 計(jì)算

（1）用 JS 動(dòng)態(tài)計(jì)算

通過(guò)JavaScript讀取屏幕寬度，然后根據(jù)寬度計(jì)算出對(duì)應(yīng)的尺寸并設(shè)置根元素的 font-size。

let pageWidth = window.innerWidth    // 視口寬度
document.write(`<style>html{font-size:${pageWidth}px;}</style>`)

一個(gè)例子：

不過(guò)這個(gè)例子里以 rem 為單位的元素的數(shù)值都是小數(shù)，可以?xún)?yōu)化 pageWidth 為原來(lái)的 1/10，這樣數(shù)值基本就是整數(shù)了。

（2）媒體查詢(xún)

可以固定設(shè)置幾個(gè)市面上的移動(dòng)設(shè)備常用尺寸：

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

缺點(diǎn)

rem 雖然解決了百分比布局中高度和寬度不關(guān)聯(lián)的痛點(diǎn)，但因 rem 與視口寬度并完全等價(jià)關(guān)聯(lián)（其實(shí)是模擬 vw 的替代方案），所以也存在著寬度不確定、高度不確定的問(wèn)題，詳見(jiàn)：rem不是神農(nóng)草，治不了移動(dòng)端百病。

另外，用 rem 自己手動(dòng)轉(zhuǎn)換設(shè)計(jì)稿給的以像素為單位的元素，是十分麻煩的，需要使用轉(zhuǎn)換工具，或者使用 sass 的混合宏來(lái)實(shí)現(xiàn) px2rem 的 mixin，上面的例子可改為如下：

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 750;  

.child{
  width: px(375);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

vw, vh

vw（view-width）、vh（view-height） 這兩個(gè)單位是CSS新增的單位，表示視區(qū)寬度/高度，視區(qū)總寬度為100vw，總高度為100vh。

這兩個(gè)單位是直接和視口的寬高掛鉤的，是最理想的實(shí)現(xiàn)方案，但是兼容性比較差。

總結(jié)

本文只是對(duì)移動(dòng)端適配的一個(gè)粗淺了解，里面涉及的具體原理和實(shí)戰(zhàn)方面的代碼優(yōu)化并沒(méi)有詳講。等有了一定移動(dòng)端開(kāi)發(fā)經(jīng)驗(yàn)后，我再來(lái)補(bǔ)充相關(guān)內(nèi)容。

參考：

加油！
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容