本文介紹移動端的自適應劝堪、flexible.js的原理和發(fā)絲線的實現(xiàn)
首先我們需要了解相關(guān)概念
基本概念
像素
不同場景下像素的含義不同婉陷。
設(shè)備像素和圖像像素
顯示設(shè)備（顯示器）是通過排列的顯示器件來顯示圖像的，一個這樣的顯示器件稱為一個“設(shè)備像素”。例如iPhone6橫向375個像素，縱向667個像素姚建。每個像素可以獨立設(shè)置顏色。
圖像像素指一個圖像（位圖）的最小展示單元吱殉，每個像素只能有一種顏色 掸冤。
物理像素和邏輯像素
物理像素指的就是設(shè)備像素，一個設(shè)備的物理像素是它的固有屬性友雳，顯示設(shè)備還會提供邏輯像素給應用程序使用稿湿，例如我們平時設(shè)置顯示器的分辨率為1280 × 800或者1440 × 900，就是設(shè)置顯示器橫向和豎向展示邏的輯像素的個數(shù)押赊。
我們在CSS中使用的px單位就是邏輯像素（頁面縮放的話饺藤，CSS的px尺寸和邏輯像素會成一定比例）。
為什么需要邏輯像素呢？因為物理像素因設(shè)備而異涕俗，不同像素排列方式和密度不同罗丰，如果程序設(shè)置一個展示元素的尺寸使用物理像素，那么它在不同的設(shè)備的尺寸是有很大區(qū)別的咽袜。因此顯示器提供邏輯像素丸卷，讓程序可以定義“希望實際看到的元素尺寸”枕稀。例如询刹，設(shè)備的分辨率是375 × 667，邏輯像素1個像素對應物理1個像素萎坷；如果設(shè)備分辨率是750 × 1334凹联，那么這個屏設(shè)置1個邏輯像素對應4個物理像素，這樣顯示的元素在兩個屏上看起來基本一樣大了哆档。
一個邏輯像素里可能包含1個或者多個物理像素點蔽挠，包含的越多則圖像看起來越清晰。
設(shè)備像素比
設(shè)備獨立像素指獨立于設(shè)備的像素瓜浸，即設(shè)備無關(guān)的像素澳淑，即邏輯像素，設(shè)備像素比指
物理像素 / 設(shè)備獨立像素
設(shè)備像素比越大插佛，說明一個邏輯像素對應的物理像素越多杠巡，圖像就會更清晰。
例如雇寇，有些移動設(shè)備的設(shè)備像素比是2氢拥，即2個物理像素的寬度等于一個邏輯像素寬度，這種設(shè)備叫“2倍屏”锨侯，也有“3倍屏”嫩海。
設(shè)備的設(shè)備像素比可以通過window.devicePixelRatio來獲取。
視網(wǎng)膜屏（retina屏）
所謂“Retina”是一種顯示技術(shù)囚痴，可以將更多的像素點壓縮至一塊屏幕里叁怪，從而達到更高的分辨率并提高屏幕顯示的細膩程度。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素深滚，也被稱為視網(wǎng)膜顯示屏奕谭。
Retina 既不是指分辨率，也不是單獨指PPI成箫，而是指視覺效果展箱。其計算公式為（可以不用了解）：
a = acttan( h / 2d )
a 代表人眼視角，h 代表像素間距蹬昌，d 代表肉眼與屏幕的距離混驰。符合以上條件的屏幕可以使肉眼看不見單個物理像素點。這樣的顯示屏就可被蘋果稱作“Retina顯示屏”。
簡單地說栖榨，視網(wǎng)膜屏就是設(shè)備的分辨率很高的屏昆汹。
meta viewport
name為"viewport"的meta標簽，可以設(shè)置viewport相關(guān)的屬性婴栽。下面說明一下viewport的概念满粗。
關(guān)于viewport，可以參考viewport深入理解愚争，在這只簡單介紹一下映皆。
viewport（視口），指移動端設(shè)備的可視區(qū)域轰枝，這包含了兩個方面捅彻，一個是我們可以在手機上看到的網(wǎng)頁的大小（layout viewport）鞍陨，這個可以通過document.documentElement.clientWidth獲取到步淹。另一個是可視區(qū)的大小（visual viewport）诚撵，可以通過window.outerWidth獲取到缭裆。
手機visual viewport的大小各不相同（注意，這里的大小指的都是邏輯像素）寿烟，通常手機默認的layout viewport的大小是980px或者1024px（也可能是其它值澈驼，這個是由設(shè)備自己決定的）。
手機默認的layout一般都和PC近似韧衣，而大于手機的可視區(qū)盅藻。這是為了讓移動端顯示PC的網(wǎng)頁，PC的網(wǎng)頁通常較大畅铭，超出移動端可視的范圍就會產(chǎn)生滾動條氏淑。
如果我們設(shè)計專門的移動端的網(wǎng)頁，不希望很大的layout viewport的尺寸硕噩，而是和移動端適配假残，不產(chǎn)生滾動條。那么可以設(shè)置name為"viewport"的meta標簽炉擅。
width
name為"viewport"的meta標簽支持layout viewport的尺寸設(shè)置辉懒。
<meta name="viewport" content="width=device-width">
這樣設(shè)置的結(jié)果是，layout viewport的寬度等于設(shè)備的視口寬度谍失。通常移動端的網(wǎng)頁都要這樣設(shè)置眶俩。
scale
viewport meta標簽也支持設(shè)置縮放比例，效果和用戶手動放縮一樣快鱼，例如縮放比例是2颠印，那么CSS的1px對應邏輯像素就變?yōu)?px纲岭。
<meta name="viewport" content="width=device-width, initial-scale=2.0">
viewport meta標簽的scale控制頁面的縮放，縮放之后线罕，CSS的1px代表的邏輯像素有所變化止潮，例如scale設(shè)置為0.5的話，CSS的1px會對應0.5px的邏輯像素钞楼。
viewport的scale相關(guān)有幾個關(guān)鍵屬性
- initial-scale 設(shè)置頁面的初始縮放值喇闸，為一個數(shù)字，可以帶小數(shù)
- minimum-scale 允許用戶的最小縮放值询件，為一個數(shù)字燃乍，可以帶小數(shù)
- maximum-scale 允許用戶的最大縮放值，為一個數(shù)字雳殊，可以帶小數(shù)
- height 設(shè)置layout viewport 的高度橘沥，這個屬性對我們并不重要窗轩，很少使用
- user-scalable 是否允許用戶進行縮放夯秃，值為"no"或"yes", no 代表不允許，yes代表允許
注意痢艺，如果設(shè)置scale小于1仓洼，那么屏幕會縮小，所以視口能夠展示的邏輯像素增多堤舒，因此視口的尺寸會變大色建。例如對于一個視口寬度為327的設(shè)備，設(shè)置scale為0.5后
console.log(document.documentElement.clientWidth); // 654
移動端自適應
前端面試刷題網(wǎng)站：靈題庫舌缤，收集大廠面試真題箕戳，相關(guān)知識點詳細解析。
簡述
移動端自適應的基本思路是国撵，讓我們對元素的尺寸定義是和設(shè)備尺寸成一定比例的陵吸，比如一個盒子在10px的屏幕上展示2px寬度，在20px的屏幕上展示4px介牙，這樣在不同的設(shè)備上就可以自適應地展示了壮虫。
如何實現(xiàn)上述效果呢？首先會想到使用百分比环础，但是百分比是相對于父元素的比例囚似，如果使用百分比會讓元素的展示不符合預期，例如父元素增大時候线得，子元素也一定跟隨增大饶唤。因此百分比最好是相對于屏幕的寬度（通常不適用高度作為基準）。
如果有CSS的尺寸單位能夠表達相對于屏幕的寬度的百分比贯钩，就可以很方便地實現(xiàn)自適應了募狂。
總而言之呵晨，移動端自適應的實現(xiàn)原理是，使用一些CSS的長度單位熬尺，讓我們寫的CSS尺寸能夠和屏幕寬度保持固定比例摸屠。 這個比例是多少？很明顯粱哼，就是UI圖上的元素尺寸 / UI圖上的屏幕寬度季二。
自適應開發(fā)流程
通常我們開發(fā)頁面時候，UI圖會提供每個元素的尺寸揭措。如何根據(jù)UI圖進行自適應開發(fā)呢胯舷？
我們現(xiàn)在已知的信息包括：UI圖的屏幕寬度（UI_screen_width），UI圖的元素的尺寸（UI_element_width）绊含。那么我們就可以計算出UI圖的元素相對于屏幕寬度的百分比桑嘶，有了這個百分比，再結(jié)合CSS的相對于屏幕寬度的比例的長度單位躬充，就可以計算出這個元素的尺寸值了逃顶。對于不同的單位，計算方法也是不同的充甚。
所以自適應開發(fā)流程就是先根據(jù)UI圖計算元素的百分比以政，再根據(jù)百分比計算出元素在某個自適應單位下的實際值。
一般在實際項目中伴找，會有一個算法計算從UI_element_width到使用自適應單位的尺寸值盈蛮，開發(fā)時候就按照UI圖的數(shù)值來寫，在打包構(gòu)建時候轉(zhuǎn)成自適應單位技矮。
因此在開發(fā)自適應頁面時候抖誉，我們需要：
- 計算方法
- 轉(zhuǎn)換工具
下面介紹兩個主流的自適應方案，和對應的計算方法&轉(zhuǎn)換工具衰倦。
vm自適應
CSS中有提供viewport單位袒炉，vm和vh，100vm = 屏幕寬度耿币，100vh = 屏幕高度梳杏。使用vm來實現(xiàn)自適應是很方便的。
下面我們看如何根據(jù)元素相對于屏幕尺寸的比例淹接，計算元素尺寸在vm單位下的取值十性。
比如UI圖使用750px的屏幕寬度，一個元素的寬度是75px塑悼，那么元素寬度就是10%的屏幕寬度劲适，使用vm單位就是10vm。
計算公式是什么呢厢蒜？因為不管是UI圖霞势，還是實際的開發(fā)烹植，元素寬度和屏幕寬度比例一樣，設(shè)元素的實際值是x(vm)則可以得到：
x(vm) / 100vm = UI_element_width / UI_screen_width
所以x = UI_element_width / UI_screen_width × 100愕贡。
這就是使用vm自適應的計算方法草雕。
通常使用CSS預處理器的話，就可以實現(xiàn)在打包時候?qū)﹂L度進行轉(zhuǎn)換了固以。例如使用Sass：
//iPhone 6尺寸作為設(shè)計稿基準
$vm_base: 750;
@function vw($px) {
@return ($px / $vm_base) * 100vw;
}
.demo-dev {
width: vm(100);
}
rem自適應
**
在一段時間內(nèi)墩虹，由于vm的兼容性不能滿足項目需求，因此有一些替代方案憨琳，其中最流行的就是rem自適應方案诫钓。
rem也是CSS中的一個長度單位，1rem = 16px篙螟。html元素的style.fontSize默認是16px菌湃，如果html元素的style.fontSize改為其他的值，則1rem也相應變化遍略，例如修改document.documentElement.style.fontSize=75px惧所，則1rem = 75px。
根據(jù)rem的這個特性墅冷，我們看下如何使用rem來實現(xiàn)自適應纯路。
我們先設(shè)定，document.documentElement.style.fontSize簡寫為html.fontSize寞忿；屏幕寬度document.documentElement.getBoundingClientRect().width簡寫為visual_layout_width。
我們上面已經(jīng)提到顶岸，自適應方案的本質(zhì)就是讓我們寫的CSS的尺寸和屏幕寬度保持固定比例腔彰，根據(jù)rem的特性（1rem = html.fontSize），只需要讓html.fontSize和屏幕寬度保持固定比例辖佣，我們使用rem來寫CSS單位霹抛，就可以達到CSS尺寸和屏幕寬度保持固定比例的目的了。例如UI圖屏幕寬度是750px卷谈，UI圖元素尺寸是75px杯拐。我們只要設(shè)置html.fontSize = 1 / 10 × visual_layout_width，然后元素的CSS尺寸是1rem世蔗，這樣元素就會根據(jù)屏幕寬度自適應了端逼。
其實html.fontSize設(shè)置的和屏幕寬度成一定比例即可，具體比例是多少都無所謂污淋，只要計算元素的rem尺寸時候使用相同比例計算就可以顶滩。
在flexible.js里面，這個比例是1 / 10寸爆，即
html.fontSize = 1 / 10 × visual_layout_width礁鲁。
下面我們看使用rem實現(xiàn)自適應的計算方法盐欺，設(shè)html的font size和屏幕寬度比例為r，即：
r = html.fontSize / visual_layout_width
所以屏幕寬度的值是
visual_layout_width = html.fontSize / r
設(shè)元素實際值是x(rem)仅醇，那么因為x和visual_layout_width的比值冗美，等于UI_element_width / UI_screen_width。所以x(rem) = html.fontSize(px) / r × UI_element_width / UI_screen_width = 1(rem) / r × UI_element_width / UI_screen_width析二，所以x = UI_element_width / UI_screen_width / r墩衙。
綜上，rem自適應方案實現(xiàn)流程為：
- 首先選定一個比例
r甲抖， - 然后確定UI圖的屏幕寬度
UI_screen_width漆改。 - 然后js動態(tài)修改
document.documentElement.style.fontSize = document.documentElement.getBoundingClientRect().width × r。 - 通過公式
x = UI_element_width / UI_screen_width / r根據(jù)UI圖元素的尺寸計算實際CSS代碼的rem值准谚。
類似vm挫剑，rem方案也可以通過預編譯器來實現(xiàn)轉(zhuǎn)換工作
//iPhone 6尺寸作為設(shè)計稿基準
$rem_rate: 0.1;
$ui_screen_width: 750;
@function rem($px) {
@return ($px / $ui_screen_width / $rem_rate);
}
.demo-dev {
width: rem(75);
}
也可以使用px2rem-loader工具進行轉(zhuǎn)換。
0.5px實現(xiàn)
簡介
在上面“物理像素和邏輯像素”部分介紹了柱衔，通常我們使用CSS設(shè)置的是邏輯像素樊破，不能直接設(shè)置物理像素。有時候前端需要實現(xiàn)比較細的線唆铐，例如0.5px的邏輯像素（或者說1px的物理像素）哲戚，這種效果成為“發(fā)絲線”。按照正常的思路艾岂，我們直接設(shè)置0.5px就可以顺少，但是不同瀏覽器的處理不同，因此0.5px并不是在每個瀏覽器都能達到預期效果王浴。
有幾個方案都能實現(xiàn)0.5px的效果脆炎，下面簡單介紹一下這些方案。
更詳細的說明氓辣，請閱讀 怎么畫一條0.5px的邊
**
方案
**
直接設(shè)置0.5px
**
.half-px {
height: 0.5px;
}
**
transform
**
.half-px {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}
**
線性漸變
**
.half-px {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
}
**
box-shadow
.half-px {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
**
svg
.half-px {
background: none;
height: 1px;
background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}
**
viewport scale縮放
先設(shè)置viewport的縮放比例
<meta name="viewport" content="width=device-width,initial-scale=0.5">
設(shè)置完viewport的scale之后秒裕，通過上面“meta viewport”部分的說明，CSS的1px會對應0.5px的邏輯像素钞啸。因此直接設(shè)置元素的尺寸為1px即可實現(xiàn)0.5px的效果几蜻。
.half-px {
height: 1px;
}
為了實現(xiàn)一個物理像素的細線，通常scale設(shè)置成設(shè)備像素比的倒數(shù)：1 / window.devicePixelRatio体斩。
flexible.js
**
簡述
flexible.js主要實現(xiàn)了兩個功能：
- 基于rem的自適應
- 基于viewport scale的發(fā)絲線
我們在項目中引入flexible.js（通過script標簽引入或者內(nèi)聯(lián)到html中都可以）之后梭稚，就可以按照上面介紹的rem自適應方案實現(xiàn)自適應效果了。
我們上面已經(jīng)提到了基于rem的自適應方案硕勿，flexible.js固定document.documentElement.style.fontSize和document.documentElement.getBoundingClientRect().width的比例為1 / 10哨毁。flexible.js實現(xiàn)了根據(jù)屏幕寬度計算html的fontSize并動態(tài)設(shè)置。
我們使用flexible.js時候源武，只需要實現(xiàn)px到rem的轉(zhuǎn)換即可：
$rem_rate: 0.1; // flexible.js固定的比例扼褪，這樣設(shè)定是為了方便計算
$ui_screen_width: 750; // UI圖的屏幕寬度尺寸
@function rem($px) {
@return ($px / $ui_screen_width / $rem_rate);
}
.demo-dev {
width: rem(75); // 1rem
}
另外想幻，引入flexible.js之后，由于它動態(tài)改了viewport的scale话浇，所以可以直接寫1px來實現(xiàn)發(fā)絲線的效果脏毯。
對于rem自適應的功能，需要注意的是幔崖，在flexible.js倉庫中作者有說明：
由于viewport單位得到眾多瀏覽器的兼容食店，lib-flexible這個過渡方案已經(jīng)可以放棄使用，不管是現(xiàn)在的版本還是以前的版本赏寇，都存有一定的問題吉嫩。建議大家開始使用viewport來替代此方案。
viewport方案對代碼侵入性小嗅定，不需要引入額外腳本自娩，而且在主流瀏覽器中的兼容性越來越好，所以是更優(yōu)的方案渠退。
原理
**
源碼
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('將根據(jù)已有的meta標簽來設(shè)置縮放比例');
var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial-dpr=([\d.]+)/);
var maximumDpr = content.match(/maximum-dpr=([\d.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下稚虎，對于2和3的屏磨镶，用2倍的方案王暗，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他設(shè)備下鳖枕，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
**
自適應
**
flexible.js實現(xiàn)rem自適應方案的一個主要操作是根據(jù)設(shè)備寬度設(shè)置了html的fontSize，比例固定為 1/ 10梅誓。
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
設(shè)置好html的fontSize后恰梢，我們就可以根據(jù)UI圖計算元素尺寸了。
發(fā)絲線
**
flexible.js設(shè)置了viewport的scale為設(shè)備像素比的倒數(shù)
scale = 1 / dpr;
這樣加載了flexible.js之后证九，CSS的1px對應的是1個物理像素删豺，因此就可以實現(xiàn)發(fā)絲線了。
