移動端適配方案(下)

時間 2019-11-06

標籤移動適配方案欄目無線简体版

原文原文鏈接

上一篇介紹了像素和視口這些基本概念，如今接着移動端的適配方案。css

推薦一篇文章：MobileWeb適配總結，裏面說到的三種佈局方法已經說的很詳細，還分別作了demo，我就不作了，這裏說說三種方案的原理以及我使用中的感覺，但願各爲互補，你們理解是最重要的。html

以前作過PC頁面的人聊的最多的就是『兼容』，這是由於瀏覽器之間的差別引發的，再也不多說。而移動端是基本沒有『兼容』的問題的，全是CSS3，簡直不要太開心。但是『適配』問題隨之而來。前端

什麼是『適配』？作PC頁面的時候，咱們按照設計圖的尺寸來就好，這個側邊欄200px，那個連接50px的。但是，當咱們開始作移動端頁面的時候，設計師給了一份寬度爲640px的設計圖。那麼，咱們把這份設計圖實如今各個手機上的過程就是『適配』。git

那麼，咱們怎麼開始呢？目前有三種方法：github

固定高度，寬度自適應web
固定寬度，viewport縮放瀏覽器
rem作寬度，viewport縮放app

這三種方法的核心都是視口的肯定，如今以實現這個設計圖爲例說明。佈局

固定高度，寬度自適應

demoflex

這也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。騰訊、京東、百度、天貓、亞馬遜的首頁都是使用的這種方法。

隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體佈局差很少，在哪一個寬度須要調整的時候使用響應式佈局調調就行（好比網易新聞），這樣就實現了『適配』。

原理

這種方法使用了完美視口：

<meta name="viewport" content="width=device-width,initial-scale=1">

這樣設置以後，咱們就能夠不用管手機屏幕的尺寸進行開發了。

固定寬度，viewport縮放

demo

設計圖、頁面寬度、viewport width使用一個寬度，瀏覽器幫咱們完成縮放。單位使用px便可。

目前已知荔枝FM、網易新聞在使用這種方法。有興趣的同窗能夠看看是怎麼作的。

原理

這種方法須要根據屏幕寬度來動態生成viewport，生成的 viewport 基本是這樣：

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

640 是咱們根據設計圖定下的，0.5 是根據屏幕寬度動態生成的。

生成的viewport告訴瀏覽器網頁的佈局視口使用 640px，而後把頁面縮放成50%，這是絕對的等比例縮放。圖片、文字等等全部元素都被縮放在手機屏幕中。

這個gif圖說明了一切：

rem作寬度，viewport縮放

demo

這也是淘寶使用的方案，根據屏幕寬度設定 rem 值，須要適配的元素都使用 rem 爲單位，不須要適配的元素仍是使用 px 爲單位。

具體使用方法見使用Flexible實現手淘H5頁面的終端適配

使用這個方法的庫：

原理

實際上作了這幾件事情：

動態生成 viewport
屏幕寬度設置 rem的大小，即給<html>設置font-size
根據設備像素比（window.devicePixelRatio）給<html>設置data-dpr

這麼設置的好處是可讓不一樣設備的rem或px都顯示同樣的長度。

設置rem

設置rem的意義在於獲得一個與屏幕寬度相關的單位，原本vw是最合適的，可是應該兼容性的問題，只能使用rem來作。這樣，讓不一樣設備的rem顯示同樣的長度。

vw是CSS3引入的單位，1vw = 1%窗口寬度

上面的佈局咱們能夠這樣：

html{
    font-size: 屏幕寬度 / 10; 
}
.btn{
    width:8.75rem;
    height:1.25rem;
}

這樣，不管屏幕寬度是多少，.btn都是相對於屏幕的這麼寬，作到了適配。

設置 viewport 縮放和 data-dpr

這兩個設置實際上是乾的一件事，就是適配高密度屏幕手機的px單位。

[data-dpr="2"] {
  font-size: 26px;
}
[data-dpr="3"] {
  font-size: 39px;
}

而縮放是動態的，這樣，不一樣設備下的px顯示同樣的長度。

設備像素比是2，縮放爲0.5，data-dpr爲2；設備像素比是3，縮放爲0.3333，data-dpr爲3。

總結

坦白說，我不以爲第一種方案能就作『適配』方案，由於太笨了，只能作一些列表等簡單排列的樣式。

可是一些複雜的活動頁的佈局，用它可能就力不從心了：

這是我曾經作過的一個頁面，『PK』要和左右兩張圖平行，並且下面的『不怒自威』、『義薄雲天』和下面的戰鬥力位置都要固定，不能有差。若是用第一種方案，可能各個元素就要絕對定位，而後各類百分比來定位了。且不說計算麻煩，並且辛苦一番最後的結果尺寸是和設計圖有出入的。

可是，第二種和第三種方案就絕對不會有這種狀況，不會和設計圖有差。再說第二種和第三種方案的區別，目前我惟一知道的區別就是第三種方案更加靈活，有兩種單位可使用，想讓元素適配的時候就用rem，想讓文字不縮放的時候就用px。

若是你沒有明白我以上講的，多是我太囉嗦了，這是我在團隊內分享時作的PPT，應該沒那麼囉嗦了。固然你也能夠看看下面的那些文章，不過最好的理解方式就是用這些方案作幾個頁面，到時候就明白了。

其餘文章

這兩篇文章看着簡單，尤爲是上一篇講視口，花費了將近一週的時間去翻閱資料。原本覺得很簡單的東西，才發現有那麼多名堂。好了，後天年會，祝我中大獎吧。

個人博客，歡迎訂閱

微博粉絲太少，求粉

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。