目前，很多APP設(shè)計(jì)師小伙伴已經(jīng)開始轉(zhuǎn)向H5前端開發(fā)啦，但是解決所有iPhone和安卓機(jī)型的適配問題是我們的重中之重。無論是設(shè)計(jì)APP還是寫前端H5.都是要考慮移動(dòng)端的兼容性。

25學(xué)堂今天跟大家來回顧一下H5頁面去適配所有iPhone和安卓機(jī)型的一些技巧和辦法。

回歸正題，兼容iphone各版本機(jī)型最佳的方式就是自適應(yīng)。

1、viewport 簡單粗暴的方式：

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

直接設(shè)置viewport為320px的1.3倍，將頁面放大1.3倍。

為什么是1.3？

目前大部分頁面都是以320px為基準(zhǔn)的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那么以1.29倍也就約等于1.3了。
2、ip6+ 的CSS media query

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
  /*iphone 6*/
}

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
  /*iphone 6 plus*/
}

PS: 也可以直接使用實(shí)際的device-width：如 device-width : 375px

在原有頁面的基礎(chǔ)上，再針對相應(yīng)的屏幕大小單獨(dú)寫樣式做適配。
3、REM布局

REM是CSS3新增的一種單位，并且移動(dòng)端的支持度很高，android2.x+，ios5+ 都支持。REM是相對于dom結(jié)構(gòu)的根元素來設(shè)置大小，也就是html這個(gè)元素。相較于em單位，rem使用上更容易理解及運(yùn)用。

REM與PX的換算可以查看網(wǎng)址： https://offroadcode.com/prototypes/rem-calculator/

假設(shè)，html我們設(shè)置font-size:12px; 也就是說12px相對于1rem，那么18px也就是 18/12 = 1.5rem。

那么我們以320px的設(shè)計(jì)布局為基準(zhǔn)，將html設(shè)置為font-size:100px，即100px = 1rem。(設(shè)置100px是為了方便計(jì)算)那么可以將大部分px單位除以100就可以直接改成rem單位了。

REM如何做響應(yīng)式布局？

1、如果僅僅是適配ip6+設(shè)備，那么使用media query就行。

偽代碼如下：

/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*實(shí)際相當(dāng)于14px*/}

/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
}

這樣，在ip6下，也就將頁面內(nèi)的元素放大了1.17倍，ip6+下也就是放大了1.29倍。

2、如果是完全自適應(yīng)，那么可以通過JS來控制。

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
    };

  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

頁面初始化的時(shí)候計(jì)算font-size，然后再綁定resize事件。這種效果就和百分比布局一樣了。

那么用REM做單位與百分比做單位有什么優(yōu)勢？

主要優(yōu)勢在于能更好的控制元素大小。（一般百分比應(yīng)用在布局層，一般常見設(shè)置為50%，33.3%，25%之類的整數(shù)居多，難以運(yùn)用在復(fù)雜的頁面小部件內(nèi)）。但是相比百分比布局，需要借助JS或media query實(shí)現(xiàn)，略有一點(diǎn)瑕疵。

4、圖片自適應(yīng)

剛說完REM布局，那么用百分比布局也能實(shí)現(xiàn)一樣的效果，但是用百分比布局，必須要面臨一個(gè)問題：圖片寬度100%，頁面加載時(shí)會(huì)存在高度塌陷的問題。.

如圖：頁面加載時(shí)圖片高度默認(rèn)不存在。

那么可以用padding-top設(shè)置百分比值來實(shí)現(xiàn)自適應(yīng)。

公式如下：

padding-top = (Image Height / Image Width) * 100%

原理：padding-top值為百分比時(shí)，取值是是相對于寬度的。

相關(guān)代碼實(shí)現(xiàn)：

<div class="cover">
    <img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" alt=""/>
</div>

.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}

5、圖片高清化

大家都知道，iphone6 plus 是3倍高清圖了，它的devicePixelRatio = 3。

關(guān)于DPR的介紹可以查看這篇文章《 設(shè)備像素比devicePixelRatio簡單介紹 》

在ios8下，已經(jīng)開始支持img的 srcset 屬性了（目前移動(dòng)端也就ios8開始支持），也就是說，可以對一張圖片設(shè)置2個(gè)URL，瀏覽器自動(dòng)加載對應(yīng)的圖片。

黃色表示僅支持舊的srcset規(guī)范，綠色表示支持全新的srcset規(guī)范，包括sizes屬性，w描述符。 這里不展開，詳細(xì)了解可自行g(shù)oogle。

如下DEMO，請切換devicePixelRatio值進(jìn)行查看：

不過目前前端這邊圖片的實(shí)現(xiàn)基本都用lazyload的方式實(shí)現(xiàn)。srcset的圖片加載方式在實(shí)際項(xiàng)目中運(yùn)用還比較少。

6、背景圖高清化

media query 實(shí)現(xiàn)高清化

img標(biāo)簽的高清化，可以通過JS判斷devicePixelRatio的值來加載不同尺寸的圖片，但是對于背景圖，寫在CSS中的，用JS來判斷就略麻煩了，還好CSS通過media query也能判斷dpr。

目前兼容性最好的背景圖高清化實(shí)現(xiàn)方式，使用media query的 -webkit-min-device-pixel-ratio 做判斷：

/* 普通顯示屏(設(shè)備像素比例小于等于1)使用1倍的圖 */
  .css{
      background-image: url(img_1x.png);
  }

  /* 高清顯示屏(設(shè)備像素比例大于等于2)使用2倍圖  */
  @media only screen and (-webkit-min-device-pixel-ratio:2){
      .css{
    background-image: url(img_2x.png);
      }
  }

  /* 高清顯示屏(設(shè)備像素比例大于等于3)使用3倍圖  */
  @media only screen and (-webkit-min-device-pixel-ratio:3){
      .css{
    background-image: url(img_3x.png);
      }
  }

進(jìn)一步，可以通過工具生成相應(yīng)的3x，2x，1x的圖片及css，在使用時(shí)直接引用即可。誰搞一個(gè)？

關(guān)于移動(dòng)設(shè)備的 -webkit-min-device-pixel-ratio 值，可以查看該網(wǎng)頁的整理： http://bjango.com/articles/min-device-pixel-ratio/

image-set 實(shí)現(xiàn)高清化

image-set，它是Webkit的私有屬性，也是Css4的一個(gè)屬性，它是為了解決Retina屏幕下的圖像顯示而生。

使用方式也很簡單。偽代碼如下：

.css {
      background-image: url(1x.png);    /*不支持image-set的情況下顯示*/
      background: -webkit-image-set(
        url(1x.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */
        url(2x.png) 2x,/* 支持image-set的瀏覽器的[2倍Retina屏幕] */
        url(3x.png) 3x/* 支持image-set的瀏覽器的[3倍Retina屏幕] */
      );
  }

目前移動(dòng)端的支持程度來看，ios7+，android 4.4+ 下已經(jīng)支持了。如果僅僅是做ip6+的高清適配方案。 image-set 也是一種實(shí)現(xiàn)方案。

使用image-set 與 media query 實(shí)現(xiàn)有什么區(qū)別及好處？

這篇文章里面做了很詳細(xì)的闡述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

大體的意思是：image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味著，如果在低網(wǎng)速下，瀏覽器可以選擇加載低分辨率的圖片。（PS：好智能的樣子）

但是相比如media query的實(shí)現(xiàn)，image-set僅支持單個(gè)圖片的高清化，不適合在css sprite下使用。 并且兼容性也是一大硬傷。

一般來說，用在LOGO區(qū)域，單個(gè)圖片圖標(biāo)的區(qū)域下，也是個(gè)不錯(cuò)的選擇。

關(guān)于圖片列表適配，也就是要讓布局更靈活，在電商網(wǎng)站里面，商品列表是一個(gè)非常常見的結(jié)構(gòu)。一種比較智能的列表方式是：兩端對齊，間距自適應(yīng)。

那么可以使用FLEXBOX布局來實(shí)現(xiàn)兩端對齊的效果，也可以使用 text-align:justify 的方式實(shí)現(xiàn)。

具體實(shí)現(xiàn)辦法：http://www.ghugo.com/inline-block-justify/

以上內(nèi)容是非常適合想要學(xué)習(xí)H5頁面的童鞋們，算是H5頁面開發(fā)的入門教程。