• 移動(dòng)端適配方案：
  1）viewport（scale=1/dpr）
  2）rem
  3）flex
  4）vm/vh
  一庶艾、什么是移動(dòng)端適配
• 移動(dòng)端Web頁(yè)面，即常說(shuō)的H5頁(yè)面掩完、手機(jī)頁(yè)面题翰、webview頁(yè)面存淫；
• 手機(jī)設(shè)備屏幕尺寸不一坞笙，做移動(dòng)端的Web頁(yè)面版述，需要考慮安卓/IOS的各種尺寸設(shè)備上的兼容，針對(duì)移動(dòng)端設(shè)備的頁(yè)面，設(shè)計(jì)與前端實(shí)現(xiàn)怎樣做能更好地適配不同屏幕寬度的移動(dòng)設(shè)備尝抖；
• 目的：在不同尺寸的手機(jī)設(shè)備上衙熔，頁(yè)面“相對(duì)性的達(dá)到合理的展示（自適應(yīng)）”或者“保持統(tǒng)一效果的等比縮放（看起來(lái)差不多）”取具；

二、viewport視口

瀏覽器可見視口和布局視口

• visual viewport：可見視口，即屏幕寬度；
• layout viewport：布局視口，即DOM寬度涎显；
• idea viewport：理想適口讨勤，使布局視口就是可見視口拯刁；
• 設(shè)備寬度（visual viewport）與DOM寬度（layout viewport）帚桩，scale的關(guān)系是：
  （visual viewport）= （layout viewport）* scale
• 獲取屏幕寬度（visual viewport）的尺寸：window. innerWidth/Height
• 獲取DOM寬度（layout viewport）的尺寸：document. documentElement. clientWidth/Height

• 完美適配：首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容郭蕉；第二涨岁，顯示的文字的大小合適尝哆，比如一段14px大小的文字，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清彤敛，理想的情況是這段14px的文字無(wú)論是在何種密度屏幕了赌，何種分辨率下墨榄，顯示出來(lái)的大小都是差不多的。當(dāng)然勿她，不只是文字袄秩，其他元素像圖片什么的也是這個(gè)道理，ppk把這個(gè)viewport叫做 ideal viewport逢并，也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想viewport之剧；
• 移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕要寬的viewport砍聊，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)背稼，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢玻蝌？這就該輪到meta標(biāo)簽出場(chǎng)了蟹肘；meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放俯树。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求帘腹，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果许饿，如果你不這樣的設(shè)定的話竹椒，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說(shuō)會(huì)出現(xiàn)橫向滾動(dòng)條米辐；
  這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢胸完，又都有什么作用呢？

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的翘贮，目的就是解決移動(dòng)設(shè)備的viewport問(wèn)題赊窥。后來(lái)安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持狸页，事實(shí)也證明這個(gè)東西還是非常有用的锨能。

在蘋果的規(guī)范中扯再，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)，如下：
width：設(shè)置layout viewport 的寬度址遇，為一個(gè)正整數(shù)熄阻，或字符串"width-device"；
initial-scale：設(shè)置頁(yè)面的初始縮放值倔约，為一個(gè)數(shù)字秃殉，可以帶小數(shù)；
minimum-scale：允許用戶的最小縮放值浸剩，為一個(gè)數(shù)字钾军，可以帶小數(shù)；
maximum-scale：允許用戶的最大縮放值绢要，為一個(gè)數(shù)字吏恭，可以帶小數(shù)；
height：設(shè)置layout viewport 的高度重罪，這個(gè)屬性對(duì)我們并不重要樱哼，很少使用；
user-scalable：是否允許用戶進(jìn)行縮放剿配，值為"no"或"yes", no 代表不允許唇礁，yes代表允許；

• 設(shè)置理想視口：把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度惨篱，得到理想視口（ideal viewport）：

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

參考：移動(dòng)前端開發(fā)之viewport的深入理解

三、物理像素(physical pixel)

• 物理像素又被稱為設(shè)備像素围俘，他是顯示設(shè)備中一個(gè)最微小的物理部件砸讳，每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度，所謂的一倍屏界牡、二倍屏（Retina）簿寂、三倍屏，指的是設(shè)備以多少物理像素來(lái)顯示一個(gè)CSS像素宿亡，也就是說(shuō)常遂，多倍屏以更多更精細(xì)的物理像素點(diǎn)來(lái)顯示一個(gè)CSS像素點(diǎn)，在普通屏幕下1個(gè)CSS像素對(duì)應(yīng)1個(gè)物理像素挽荠，而在Retina屏幕下克胳，1個(gè)CSS像素對(duì)應(yīng)的卻是4個(gè)物理像素，關(guān)于這個(gè)概念圈匆，看一張“田”字示意圖就會(huì)清晰了漠另；

四、CSS像素

• CSS像素是一個(gè)抽象的單位跃赚，主要使用在瀏覽器上笆搓，用來(lái)精確度量WEB頁(yè)面上的內(nèi)容，一般情況下，CSS像素稱為與設(shè)備無(wú)關(guān)的像素（device-independent pixel）满败，簡(jiǎn)稱DIPs肤频，CSS像素顧名思義就是我們寫CSS時(shí)所用的像素；

作為Web開發(fā)者算墨，我們接觸的更多的是用于控制元素樣式的樣式單位像素宵荒。這里的像素我們稱之為CSS像素
參考：CSS像素、物理像素米同、邏輯像素骇扇、設(shè)備像素比、PPI面粮、Viewport #21
五少孝、設(shè)備像素比

• 設(shè)備像素比dpr(device pixel ratio)：設(shè)備像素比簡(jiǎn)稱dpr，其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系熬苍，它的值可以按下面的公式計(jì)算得到：
• 設(shè)備像素比=物理像素/設(shè)備獨(dú)立像素
• Retina屏的iphone上稍走，devicePixelRatio的值為2，也就是說(shuō)1個(gè)css像素相當(dāng)于2個(gè)物理像素柴底，通常所說(shuō)的二倍屏（Retina）的dpr是2婿脸，三倍屏是3；
• viewport中的scale和dpr是倒數(shù)關(guān)系：

// 獲取當(dāng)前設(shè)備的dpr：
JavaScript: window.devicePixelRatio柄驻。
CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio狐树。不同dpr的設(shè)備，可根據(jù)此做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)鸿脓。

六抑钟、設(shè)備獨(dú)立像素dip與設(shè)備像素dp

• 設(shè)備獨(dú)立像素dip(device independent pixels)：與屏幕密度有關(guān)，dip可以用來(lái)輔助區(qū)分視網(wǎng)膜設(shè)備還是非視網(wǎng)膜設(shè)備野哭；
• 設(shè)備像素dp(device pixels)
• 安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi在塔、mdpi、hdpi拨黔、xhdpi等不同的等級(jí)蛔溃，規(guī)定以160dpi為基準(zhǔn)，1dp=1px篱蝇；如果密度為320dpi贺待，則1dp=2px，以此類推零截；
• IOS設(shè)備：從iphone4開始Retina屏狠持；
• CSS像素與設(shè)備獨(dú)立像素之間的關(guān)系依賴于當(dāng)前的縮放等級(jí)；

七瞻润、屏幕像素密度PPI(pixel per inch)

• 屏幕像素密度是指一個(gè)設(shè)備表面上存在的像素?cái)?shù)量喘垂，它通常以每英寸有多少像素來(lái)計(jì)算（PPI）甜刻，屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)，在單一變化條件下正勒，屏幕尺寸越小得院、分辨率越高，像素密度越大章贞，反之越邢榻省；
• 屏幕密度=對(duì)角線分辨率/屏幕尺寸

八鸭限、概念關(guān)系圖

屏幕尺寸蜕径、屏幕分辨率-->對(duì)角線分辨率/屏幕尺寸-->屏幕像素密度PPI
                                             |
              設(shè)備像素比dpr = 物理像素 / 設(shè)備獨(dú)立像素dip(dp)
                                             |
                                       viewport: scale
                                             |
                                          CSS像素px

CSS像素與設(shè)備像素“田字圖解”

九、前端實(shí)現(xiàn)相關(guān)方式

• viewport 設(shè)置理想視口

// 設(shè)置理想視口败京，使得DOM寬度(layout viewport)與屏幕寬度(visual viewport)一樣大兜喻，DOM文檔主寬度即為屏幕寬度，1個(gè)CSS像素（1px）由多少設(shè)備像素顯示由具體設(shè)備而不同赡麦；
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

十朴皆、動(dòng)態(tài)設(shè)置視口縮放為1/dpr

• 對(duì)于安卓，所有設(shè)備縮放設(shè)為1泛粹，對(duì)于IOS遂铡，根據(jù)dpr不同，設(shè)置其縮放為dpr倒數(shù)晶姊，設(shè)置頁(yè)面縮放可以使得1個(gè)CSS像素(1px)由1個(gè)設(shè)備像素來(lái)顯示扒接，從而提高顯示精度；因此们衙，設(shè)置1/dpr的縮放視口钾怔，可以畫出1px的邊框；
• 不管頁(yè)面中有沒有設(shè)置viewport砍艾，若無(wú)，則設(shè)置巍举；若有脆荷，則改寫，設(shè)置其scale為1/dpr懊悯；

(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var dpr = 0;
  var scale = 0;

  // 對(duì)iOS設(shè)備進(jìn)行dpr的判斷蜓谋，對(duì)于Android系列，始終認(rèn)為其dpr為1
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);
    var devicePixelRatio = win.devicePixelRatio;

    if(isIPhone) {
      dpr = devicePixelRatio;
    } else {
      drp = 1;
    }
    
    scale = 1 / dpr;
  }

  /**
    * ================================================
    *   設(shè)置data-dpr和viewport
    × ================================================
    */

  docEl.setAttribute('data-dpr', dpr);
  // 動(dòng)態(tài)改寫meta:viewport標(biāo)簽
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    document.documentElement.firstElementChild.appendChild(metaEl);
  } else {
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  }

})(document, window);

十一炭分、px單位的適配
設(shè)置動(dòng)態(tài)縮放視口后桃焕，在iphone6上，縮放為0.5捧毛，即CSS像素2px最終顯示效果為1px观堂，而在scale=1的設(shè)備让网，CSS像素1px顯示效果為1px，為了達(dá)到顯示效果一致师痕，以px為單位的元素（比如字體大欣６谩），其樣式應(yīng)有適配不同dpr的版本胰坟，因此因篇，在動(dòng)態(tài)設(shè)置viewport:scale的時(shí)候，同時(shí)在根元素上加上data-dpr=[dpr]笔横，但是這種方式還是不夠竞滓，如果dpr為2，3之外的其他數(shù)值吹缔，px就沒辦法適配到商佑，因此會(huì)選擇用rem為單位進(jìn)行適配；

.p {
    font-size: 14px;

  [data-dpr="2"] & {
    font-size: 14px * 2;
  }

  [data-dpr="3"] & {
    font-size: 14px * 3;
  }
}

// 為寫樣式方便涛菠，可以借助sass的mixin寫代碼片段：
// // 適配dpr的字體大小
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}
@mixin px-dpr($property, $px) {
  #{$property}: $px;

  [data-dpr="2"] & {
    #{$property}: $px * 2;
  }

  [data-dpr="3"] & {
    #{$property}: $px * 3;
  }
}

// 使用
@include font-dpr(14px);
@include px-dpr(width, 40px); @include px-dpr(height, 40px);

十二莉御、設(shè)置縮放視口與設(shè)置理想視口有什么不同

• 問(wèn)題：viewport設(shè)為理想視口（scale=1）,基本上已經(jīng)滿足適配，為什么要?jiǎng)討B(tài)設(shè)置viewport縮放俗冻？
• 原因：iphone6為例礁叔，dpr=2，縮放設(shè)為0.5迄薄，則DOM寬度為750琅关，縮放后顯示剛好屏幕寬度為375，而總的CSS像素其實(shí)是750讥蔽，與設(shè)備像素一致涣易，這樣1px的CSS像素，占用的物理也是1冶伞；而viewport設(shè)置縮放為1的理想視口情況下新症，DOM寬度為375，顯示也剛好是屏幕寬度响禽，然而1px的CSS像素徒爹，占用的物理像素是2，這樣說(shuō)來(lái)芋类，這樣設(shè)置可以實(shí)現(xiàn)1px的線條在二倍屏的顯示隆嗅，因?yàn)椋篊SS像素與設(shè)備像素的關(guān)系依賴于屏幕縮放；
• 驗(yàn)證：設(shè)備：iphone6
  在scale=0.5時(shí)侯繁，1px邊框顯示效果胖喳；
  在scale=1.0時(shí)，1px邊框顯示效果贮竟；
  在scale=0.5時(shí)丽焊，2px邊框顯示效果较剃；
  通過(guò)對(duì)比后發(fā)現(xiàn)，在scale=0.5時(shí)粹懒，1px的線比scale=1.0要細(xì)重付，這也就解決了1px線條的顯示問(wèn)題；

十三凫乖、rem(一個(gè)css單位)

• 定義：font size of the root element确垫，這個(gè)單位的定義和em類似，不同的是em是相對(duì)于父元素帽芽，而rem是相對(duì)于根元素删掀，rem定義是根元素的font-size，以rem為單位导街，其數(shù)值與px的關(guān)系披泪，需相對(duì)于根元素<html>的font-size計(jì)算，比如設(shè)置根元素font-size=16px搬瑰，則表示1rem=16px款票；
• 根據(jù)這個(gè)特點(diǎn)，可以根據(jù)設(shè)備寬度動(dòng)態(tài)設(shè)置根元素的font-size泽论，使得以rem為單位的元素在不同終端上以相對(duì)一致的視覺效果呈現(xiàn)艾少；
• 選取一個(gè)設(shè)備寬度作為基準(zhǔn)，設(shè)置其根元素大小翼悴，其他設(shè)備根據(jù)此比例計(jì)算其根元素大小缚够，比如使得iphone6根元素font-size=16px；

• 根元素fontSize公式：width/fontSize = baseWidth/baseFontSize鹦赎；
  其中谍椅，baseWidth, baseFontSize是選為基準(zhǔn)的設(shè)備寬度及其根元素大小，width, fontSize為所求設(shè)備的寬度及其根元素大泄呕啊雏吭；

十四、動(dòng)態(tài)設(shè)置根元素fontSize

// 以320px的屏幕為基準(zhǔn)
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基準(zhǔn)像素為12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

/**
  * 以下這段代碼是用于根據(jù)移動(dòng)端設(shè)備的屏幕分辨率計(jì)算出合適的根元素的大小
  * 當(dāng)設(shè)備寬度為375(iPhone6)時(shí)陪踩，根元素font-size=16px; 依次增大杖们；
  * 限制當(dāng)為設(shè)備寬度大于768(iPad)之后，font-size不再繼續(xù)增大
  * scale 為meta viewport中的縮放大小
  */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  /**
    * ================================================
    *   設(shè)置根元素font-size
    * 當(dāng)設(shè)備寬度為375(iPhone6)時(shí)膊毁，根元素font-size=16px; 
    × ================================================
    */
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);

十五胀莹、rem計(jì)算(px2rem)

• 對(duì)于需要使用rem來(lái)適配不同屏幕的元素基跑，使用rem來(lái)作為CSS單位婚温，為了方便，可以借助sass寫一個(gè)函數(shù)計(jì)算px轉(zhuǎn)化為rem媳否，寫樣式時(shí)不必一直手動(dòng)計(jì)算栅螟；

/* 
 * 此處 $base-font-size 具體數(shù)值根據(jù)設(shè)計(jì)圖尺寸而定
 * flexible中設(shè)置的標(biāo)準(zhǔn)是【fontSize=16px, when 屏幕寬度=375】荆秦，因此，按此標(biāo)準(zhǔn)進(jìn)行計(jì)算力图，
 * 若設(shè)計(jì)圖為iPhone6(375*667)的二倍稿步绸，則$base-font-size=32px
 *
 */ 
@function px2rem($px, $base-font-size: 32px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

// 使用，eg:
font-size: px2rem(18px);

十六吃媒、問(wèn)題思考

• 我之前一直在想一個(gè)問(wèn)題瓤介，選取哪個(gè)設(shè)備來(lái)做基準(zhǔn)、屏幕寬度等分為多少比較合適赘那，設(shè)計(jì)圖給多大寬度的版本刑桑？被選取作為基準(zhǔn)的設(shè)備，應(yīng)當(dāng)就是前端需要設(shè)計(jì)提供的設(shè)計(jì)圖版本募舟，這樣可以避免一些尺寸上的糾纏祠斧，而等分為多少等分，除了考慮方便設(shè)計(jì)拱礁，是否需要考慮其他問(wèn)題琢锋？對(duì)于根元素font-size沒有手動(dòng)設(shè)置的情況，1rem究竟等于多少呢灶？

• 了解到的一些事實(shí)：某些Android設(shè)備會(huì)丟掉 rem 小數(shù)部分（具體是哪些設(shè)備吴超，搜到的文章中沒有說(shuō)），那么1rem對(duì)應(yīng)的px少些填抬，在這些安卓設(shè)備上顯示誤差就會(huì)較小烛芬，當(dāng)然如果不存在會(huì)丟掉小數(shù)這個(gè)問(wèn)題，這一說(shuō)也就不必考慮了飒责。
  未設(shè)置font-size情況下赘娄，1rem的大小具體看瀏覽器的實(shí)現(xiàn)，默認(rèn)的根元素大小是font-size=16px

• 目前一般會(huì)選取iPhone6作為基準(zhǔn)宏蛉，設(shè)計(jì)圖便要iPhone6的二倍圖
  當(dāng)動(dòng)態(tài)縮放視口為1/dpr, 計(jì)算所得的根元素fontSize也會(huì)跟著縮放遣臼，即若理想視口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 因此設(shè)置視口縮放應(yīng)放于設(shè)置根元素fontSize之前；

十七拾并、vm/vh:CSS單位

• vw(view-width), vh(view-height) 這兩個(gè)單位是CSS新增的單位揍堰，表示視區(qū)寬度/高度，視區(qū)總寬度為100vw, 總高度為100vh嗅义；
• 視區(qū)指瀏覽器內(nèi)部的可視區(qū)域大衅链酢：window.innerWidth/Height；

十八之碗、一些問(wèn)題

• upsampling/downsampling
  DownSampling: 大圖放入比圖片尺寸小的容器中時(shí)蝙眶，出現(xiàn)像素分割成就近色

• 不同scale顯示同一圖片基本無(wú)問(wèn)題;同一sacle，不同倍數(shù)圖褪那，存在色差(Downsampling)

十九幽纷、手淘的實(shí)現(xiàn)方案

• 下面主要根據(jù)我的理解摘錄了手淘公開的實(shí)現(xiàn)方案式塌，詳細(xì)可以去gitHub搜索查看，文末也附了鏈接友浸。
  圖解設(shè)計(jì)與前端協(xié)作方案：圖：手機(jī)淘寶團(tuán)隊(duì)適配協(xié)作模式
  淘寶手淘團(tuán)隊(duì)h5頁(yè)面終端適配開源庫(kù)：lib-flexible

• 方案關(guān)鍵點(diǎn)：

• 動(dòng)態(tài)改寫<meta name="viewport">標(biāo)簽

• 給<html>元素添加data-dpr屬性峰尝，并且動(dòng)態(tài)改寫data-dpr的值

• 給<html>元素添加font-size屬性，并且動(dòng)態(tài)改寫font-size的值

通過(guò)一段JS代碼根據(jù)設(shè)備的屏幕寬度收恢、dpr設(shè)置根元素的data-dpr和font-size, 這段JS代碼要在所有資源加載之前執(zhí)行武学，建議做內(nèi)聯(lián)處理。

各種元素(文本伦意、圖片)處理方案參考：
圖：怎樣讓你的網(wǎng)站適應(yīng)視網(wǎng)膜分辨率

二十劳淆、px轉(zhuǎn)rem的mixin

// 使用sass的混合宏
// 淘寶手淘的方案里，i6(375pt)屏幕寬度為10rem默赂，即font-size=75px, scale=0.5 因設(shè)計(jì)圖為二倍圖沛鸵，$base-font-size=75px
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

二十一、小結(jié)

• 適配不同屏幕寬度以及不同dpr缆八，通過(guò)動(dòng)態(tài)設(shè)置viewport(scale=1/dpr) + 根元素fontSize + rem, 輔助使用vw/vh等來(lái)達(dá)到適合的顯示曲掰；
• 若無(wú)需適配可顯示1px線條，也可以不動(dòng)態(tài)設(shè)置scale奈辰，只使用動(dòng)態(tài)設(shè)置根元素fontSize + rem + 理想視口栏妖；
• 當(dāng)視口縮放，計(jì)算所得的根元素fontSize也會(huì)跟著縮放奖恰，即若理想視口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 因此不必?fù)?dān)心rem的計(jì)算吊趾；
• !!css單位：以前我認(rèn)為這樣比較好：適配元素rem為單位，正文字體及邊距宜用px為單位瑟啃；現(xiàn)在認(rèn)為全部用rem即可论泛，包括字體大小，不用px蛹屿；
• px為單位的元素屁奏，需根據(jù)dpr有不同的大小，如大小12px, dpr=2則采用24px, 使用sass mixin簡(jiǎn)化寫法错负；
• 配合scss函數(shù)坟瓢，簡(jiǎn)化px2rem轉(zhuǎn)換，且易于維護(hù)(若需修改$base-font-size, 無(wú)需手動(dòng)重新計(jì)算所有rem單位)犹撒；
• px2rem函數(shù)的base-font-size=32px诚镰，參數(shù)傳值直接為設(shè)計(jì)圖標(biāo)注尺寸；
• 使用iPhone6(375pt)二倍設(shè)計(jì)圖:寬度750px；
• 切圖使用三倍精度圖怕享，以適應(yīng)三倍屏（這個(gè)目前我還沒有實(shí)際應(yīng)用過(guò)）

二十二、Retina視網(wǎng)膜屏
???????Retina視網(wǎng)膜屏镰踏，是指人眼在正常觀察距離（iPhone定義為10英寸函筋，iPad定義為15英寸）下，視網(wǎng)膜已經(jīng)無(wú)法分辨單個(gè)像素奠伪，不再出現(xiàn)像素顆粒感跌帐，僅能觀察到如絲般細(xì)膩的畫面，可以理解為超高分辨率屏幕绊率；

• 這是一種顯示技術(shù)谨敛，可以將把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度滤否，這種分辨率在正常觀看距離下足以使人肉眼無(wú)法分辨其中的單獨(dú)像素脸狸。

最先使用retina屏幕是iphone 4，屏幕分辨率為960 * 640（326ppi）藐俺。

對(duì)比如下兩幅圖炊甲，可以清晰地看出是否 Retina 屏的顯示差異：

屏幕快照 2018-08-20 下午3.00.23.png

兩代iPhone 的物理尺寸（屏幕寬高有多少英寸）是一樣的，從上圖可以看出欲芹，iphone 4的顯示效果要明顯好于iphone 3GS卿啡，雖然 iPhone 4 分辨率提高了，但它不同于普通的電腦顯示器那樣為了顯示更多的內(nèi)容菱父，而是提升顯示相同內(nèi)容時(shí)的畫面精細(xì)程度颈娜。這種提升方式是靠提升單位面積屏幕的像素?cái)?shù)量，即像素密度來(lái)提升分辨率浙宜，這樣做的主要目的是為了提高屏幕顯示畫面的精細(xì)程度官辽。以第三代 MacBook Pro with Retina Display為例， 工作時(shí)顯卡渲染出的2880x1880個(gè)像素每四個(gè)一組粟瞬，輸出原來(lái)屏幕的一個(gè)像素顯示的大小區(qū)域內(nèi)的圖像野崇。這樣一來(lái)，用戶所看到的圖標(biāo)與文字的大小與原來(lái)的1440x900分辨率顯示屏相同亩钟，但精細(xì)度是原來(lái)的4倍乓梨。

注意：在桌面顯示器中，我們調(diào)整了顯示分辨率清酥，比如從 800 * 600 調(diào)整到 1024 * 768 時(shí)扶镀，屏幕的文字圖標(biāo)會(huì)變小，顯示的內(nèi)容更多了焰轻。但 Retina 顯示方式不會(huì)產(chǎn)生這樣的問(wèn)題臭觉，或者說(shuō)， Retina 顯示技術(shù)解決的是顯示畫面精細(xì)程度的問(wèn)題，而不是解決顯示內(nèi)容容量的問(wèn)題蝠筑。

二十三狞膘、相關(guān)鏈接

• 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配
• web app變革之rem
• 手機(jī)淘寶的flexible設(shè)計(jì)與實(shí)現(xiàn)
• MobileWeb適配總結(jié)
• 移動(dòng)端適配方案（下）
• 一些設(shè)備的屏幕參數(shù)
• viewports剖析
• 移動(dòng)前端開發(fā)之viewport的深入理解
• 在移動(dòng)瀏覽器中使用viewport元標(biāo)簽控制布局
• 視區(qū)相關(guān)單位vw,vh簡(jiǎn)介以及可實(shí)際應(yīng)用場(chǎng)景
• https://segmentfault.com/a/1190000008767416