常見的移動(dòng)端前端適配方案分享

今天小編給大家分享的是常見的移動(dòng)端前端適配方案分享，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

在網(wǎng)上搜了一下，很多面試都會(huì)被問到移動(dòng)端適配方法的問題，最近看了一些文章，這里總結(jié)一下。

首先，談一下目前為止出現(xiàn)的一些關(guān)于移動(dòng)端適配的技術(shù)方案：

• （1）通過媒體查詢的方式即CSS3的meida queries

• （2）以天貓首頁為代表的 flex 彈性布局

• （3）以淘寶首頁為代表的 rem+viewport縮放

• （4）rem 方式

1.Media Queries

meida queries 的方式可以說是我早期采用的布局方式，它主要是通過查詢?cè)O(shè)備的寬度來執(zhí)行不同的 css 代碼，最終達(dá)到界面的配置。核心語法是：

@media screen and (max-width: 600px) { /*當(dāng)屏幕尺寸小于600px時(shí)，應(yīng)用下面的CSS樣式*/
  /*你的css代碼*/
}

優(yōu)點(diǎn)

• media query可以做到設(shè)備像素比的判斷，方法簡(jiǎn)單，成本低，特別是對(duì)移動(dòng)和PC維護(hù)同一套代碼的時(shí)候。目前像Bootstrap等框架使用這種方式布局

• 圖片便于修改，只需修改css文件

• 調(diào)整屏幕寬度的時(shí)候不用刷新頁面即可響應(yīng)式展示

缺點(diǎn)

• 代碼量比較大，維護(hù)不方便

• 為了兼顧大屏幕或高清設(shè)備，會(huì)造成其他設(shè)備資源浪費(fèi)，特別是加載圖片資源

• 為了兼顧移動(dòng)端和PC端各自響應(yīng)式的展示效果，難免會(huì)損失各自特有的交互方式

2.Flex彈性布局

以天貓的實(shí)現(xiàn)方式進(jìn)行說明：

它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死，寬度自適應(yīng)，元素都采用px做單位。

隨著屏幕寬度變化，頁面也會(huì)跟著變化，效果就和PC頁面的流體布局差不多，在哪個(gè)寬度需要調(diào)整的時(shí)候使用響應(yīng)式布局調(diào)調(diào)就行（比如網(wǎng)易新聞），這樣就實(shí)現(xiàn)了『適配』。

3.rem + viewport 縮放

這也是淘寶使用的方案，根據(jù)屏幕寬度設(shè)定 rem 值，需要適配的元素都使用 rem 為單位，不需要適配的元素還是使用 px 為單位。（1em = 16px）

PS：rem
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢？
區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)
大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖
反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一
個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。比如：p{font-size:14px;font-size:0.875rem;}
(推薦一個(gè)單位轉(zhuǎn)換的工具：http://pxtoem.com/)

實(shí)現(xiàn)原理

根據(jù)rem將頁面放大dpr倍, 然后viewport設(shè)置為1/dpr.

如iphone6 plus的dpr為3, 則頁面整體放大3倍, 1px(css單位)在plus下默認(rèn)為3px(物理像素)
然后viewport設(shè)置為1/3, 這樣頁面整體縮回原始大小. 從而實(shí)現(xiàn)高清。 

這樣整個(gè)網(wǎng)頁在設(shè)備內(nèi)顯示時(shí)的頁面寬度就會(huì)等于設(shè)備邏輯像素大小，也就是device-width。
這個(gè)device-width的計(jì)算公式為：設(shè)備的物理分辨率/(devicePixelRatio * scale)，
在scale為1的情況下，device-width = 設(shè)備的物理分辨率/devicePixelRatio 。

4、rem實(shí)現(xiàn)

比如說“魅族”移動(dòng)端的實(shí)現(xiàn)方式，viewport也是固定的：

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

通過以下代碼來控制rem基準(zhǔn)值(設(shè)計(jì)稿以720px寬度量取實(shí)際尺寸)

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;//設(shè)置基準(zhǔn)值的極限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);

css通過sass預(yù)編譯，設(shè)置量取的px值轉(zhuǎn)化rem的變量$px: (1/100)+rem;

1像素邊框高清

1.淘寶實(shí)現(xiàn)方式

上面說到的淘寶的實(shí)現(xiàn)方式即rem+viewport 縮放來實(shí)現(xiàn)。

transform: scale(0.5)

CSS代碼：

div{
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #e5e5e5;
    -webkit-transform: scale(.5);
    transform: scaleX(.5);
}

缺點(diǎn)：

圓角無法實(shí)現(xiàn)，實(shí)現(xiàn)4條邊框比較麻煩，并且只能單獨(dú)實(shí)現(xiàn)，如果嵌套，會(huì)對(duì)包含的效果產(chǎn)生不想要的效果，所以此方案配合:after和before獨(dú)立使用較多。

box-shadow

實(shí)現(xiàn)方法：

利用CSS對(duì)陰影處理的方式實(shí)現(xiàn)0.5px的效果。

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

優(yōu)點(diǎn)：

基本所有場(chǎng)景都能滿足，包含圓角的button，單條，多條線。

缺點(diǎn)：

顏色不好處理， 黑色 rgba(0,0,0,1) 最深的情況了。有陰影出現(xiàn)，不好用。
大量使用box-shadow可能會(huì)導(dǎo)致性能瓶頸。
四條邊框?qū)崿F(xiàn)效果不理想。

2.圖片實(shí)現(xiàn)

使用 background-image 實(shí)現(xiàn)1px有兩種方式: 漸變 linear-gradient 或直接使用圖片(base64)。

漸變 linear-gradient (50%有顏色，50%透明)

單條線：

div{
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

多線條：

div{
    background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
    -webkit-linear-gradient(bottom, transparent 50%, #000 50%),
    -webkit-linear-gradient(left, transparent 50%, #000 50%),
    -webkit-linear-gradient(right, transparent 50%, #000 50%);
    background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom left, left top, right top;

優(yōu)點(diǎn):
可以設(shè)置單條,多條邊框
可以設(shè)置顏色

缺點(diǎn):
大量使用漸變可能導(dǎo)致性能瓶頸
代碼量大
多背景圖片有兼容性問題

關(guān)于常見的移動(dòng)端前端適配方案分享就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。