適配2

時間 2019-11-29

標籤適配简体版

原文原文鏈接

http://c.m.163.com/CreditMarket/default.html 網易商城

http://news.163.com/mobile/ 網易新聞

http://huodong.m.taobao.com/act/layouttestvw.html 淘寶html5

固定高度，寬度自適應

democss

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

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

原理html5

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

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

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

固定寬度，viewport縮放

demoweb

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

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

原理app

這種方法須要根據屏幕寬度來動態生成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頁面的終端適配

上文提供了sass和postcss的px2rem轉換方法，我這裏給出less的px2rem。由於less不支持函數，因此須要安裝插件 less-plugin-functions ，而後就簡單了：

.function{
    .px2rem(@px,@base:72px){ return: @px / @base * 1rem; } }

這樣使用:

div{
    width: px2rem(100px);
}

使用這個方法的庫：

原理

實際上作了這幾件事情：

動態生成 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單位。

.a{
  font-size:12px; } [data-dpr="2"] .a{ font-size: 24px; } [data-dpr="3"] .a{ font-size: 36px; }

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

以前說過CSS像素和物理像素與縮放、dpr都有關係，這裏說明：

在普通手機上，.a字體設置爲12px；

在dpr是2的手機上，[data-dpr="2"] .a字體爲24px，又由於頁面縮放50%，字體爲仍是12px

總結

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

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

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

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

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

其餘文章

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

20170821 update

vw方案: https://www.w3cplus.com/css/vw-for-layout.html

demo: http://huodong.m.taobao.com/act/layouttestvw.html

相關標籤/搜索

每日一句

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

適配2