「移動端」Web頁面適配

前端人發表於2021-08-23
Web

一、什麼是移動端適配

移動端 Web 頁面，就是常說的手機 h5頁面、webview頁面、公眾號開發的網頁等。

由於手機機型較多，各個手機的螢幕尺寸不一樣，所以做移動端頁面，需要考慮在安卓和ios的各種尺寸裝置的相容問題，我們要做的 web 頁面適配，就是為了在不同裝置上，頁面能夠保持統一展示效果，或等比縮放。

二、移動適配方案

常見的移動適配方案有以下幾種：

  • viewport
  • 盒模型
  • flex
  • rem

2.1、viewport - 可視區

最初手機端需要照顧 PC 端，如果不設定 viewport，直接訪問網頁的時候，我們發現網頁內容看著很小，這是因為頁面按照PC端最小寬度980展示的，也就是我們的網頁寬度就是980，而手機螢幕寬度通常375、411、320、414等，沒有980那麼大，所以頁面被縮小了很多。

設定viewport

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

 

分別對 meta 的各個屬性介紹如下：

  • width - 設定viewport的寬度，為一個正整數，或字串‘device-width’
  • initial-scale - 設定頁面的初始縮放值，是一個數字，可以是小數
  • maximum-sacle - 設定頁面最大縮放值，是一個數字，可以是小數
  • user-scalable - 是否允許使用者進行縮放，值為'yes'或者'no',yes表示可縮放，no表示禁止縮放
  • minimum-scale - 允許使用者縮放的最小值，是一個數字，可以是小數
  • height - 設定layout viewport的高度，這個屬性很少使用

一般情況下禁止使用者縮放網頁，設定的時候只需要：

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

就可以了，但是由於某些瀏覽器不能識別 initial-scale，所以新增了最大和最小縮放限制。

viewport 設定可視區之後，就會把網頁的寬度設定為移動裝置的螢幕寬度。

如想深入學習，可查閱《viewport深入理解和使用 - 前端人 - 部落格園》。

2.2、盒模型

CSS3 中新增 box-sizing 屬性，可以設定盒模型型別。屬性值分別為：

content-box - 標準模型

border-box - IE模型

兩者最大區別就是盒子的寬度不同：

標準模型寬 = 內容寬 + padding + border

IE模型寬 = 內容寬（包含padding、border）

這樣做的優點就是可以任意設定它的 padding 和 border，不會擠壓盒子的排列，但是如果設定一個 margin，會立馬改變盒子的排列。

如想深入瞭解，可查閱《前端面試題中的“盒模型”是什麼？》「移動端」Web頁面適配

2.3、flex - 彈性佈局

Flex 是 Flex Box 的簡寫，意為彈性佈局，為盒子提供最大的靈活性。任何一個元素都可以指定為彈性佈局。

使用語法：

.box{
 display:-webkit-flex;
 display:flex;
}

採用 flex 佈局的，也稱 flex 容器，對應的屬性有：

  • flex-direction 設定排列方向(向下、向上、向左、向右)的
  • flex-wrap 內容放置不下時換行方式
  • flex-flow 是flex-direction和flex-wrap屬性簡寫預設值row nowrap
  • justify-content 定義在主軸上的對齊方式。
  • align-items 定義專案在交叉軸上如何對齊。
  • align-content 定義多根軸線的對齊方式

容器內的子元素增加，佈局所佔的係數：如：

<div class="box">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>
//其樣式為
.box{
 display:-webkit-flex;
 display:flex;
}
.child{
    flex:1;
  background:#eee;
 height:100px;
 border:solid 1px red;
}

 

此時我們給 child 不論如何設定邊框、內邊距，還有外邊距，三個 child 始終排列在一行。

flex 佈局優點：

  • 可以實現 border-box 的效果。
  • 新增彈性佈局之後，元素不需要再使用浮動，清除浮動等。
  • 同行元素設定邊框、內外邊距均不影響同行排列。
  • 還可使用 max-width、min-width 或固定寬度與 flex 配合使用，另一邊可自動填充功能。

不設定其他屬性的時候，彈性佈局預設水平方向從左排列，還可以通過屬性控制垂直方向佈局，對齊方式等，可以點選《flex佈局製作自適應網頁 - 前端人 - 部落格園》詳細學習。彈性佈局超強大，應用也非常廣泛。

2.4、rem

rem是一種相對單位。長度單位可分為兩種：相對單位和絕對單位。

絕對單位：長度是固定的值，反應物理真實尺寸。如：px畫素，一個畫素相當於我們螢幕的一個小點，螢幕實際就是由很多個畫素點組成的，不同顯示器畫素大小不同。還有cm、mm、in等等。

相對單位：根據其參考物決定的，參照物大小改變時，它也會改變。如%、rem、em、vh、ex等等。

網頁佈局中我們常用到em和rem兩種單位：

em - 是相對於自身的

rem - 是root em,相對於根元素的

em和rem 修改他們自身和html的font-size大小，會改變em、rem單位大小。

特點：使用rem佈局時，只需要通過寬度改變html的font-size，就可以改變所有元素大小。注意的是，所有設定大小的時候都要使用rem。

 

相關文章