作者：好學習吧丶

很多人聊起移動端适配都是懵逼狀态，都想口吐芬芳。難道移動端還要适配，直接px寫死，其他自适應不就完了嗎？其實不然，要求嚴格的公司會要求縮放比例完全相同，簡單說就是，在每個手機上的每一行的字數都要一樣。接下來，我們就要細說移動端适配的前世今生

一、為什麼要移動端适配？

一般情況下設計稿的設計師按照375的尺寸設計，然而，在現在移動終端（就是手機）快速更新的時代，每個品牌的手機都有着不同的物理分辨率，這樣就會導緻，每台設備的邏輯分辨率也不盡相同，此時357的設計稿，如果想要還原那基本是不可能了，因為如果一個左右布局，左邊如果寫死，右邊自适應的話，每個設備的右邊所展示的内容大小就不盡相同，這是移動端适配就顯得尤其重要

既然要了解前世今生，我們就從幾個概念說起先上一張圖

下面我們一個個解析

1.1 屏幕尺寸

屏幕尺寸是以屏幕對角線的長度來計量，計量單位為英寸。

如圖所示兩個對角線的長度就是這個屏幕的尺寸

1.2 像素

我們看到上圖320x480叫分辨率，而這個所謂的分辨率就是說白了就橫向320個像素縱向480個像素組成

1.2.1 什麼叫像素呢？

像素（Pel，pixel;pictureelement），為組成一幅圖像的全部亮度和色度的最小圖像單元。電視的圖像是由按一定間隔排列的亮度不同的像點構成的，形成像點的單位也就是像素，組成圖像的最小單位就是像素。從計算機技術的角度來解釋，像素是硬件和軟件所能控制的最小單位。它指顯示屏的畫面上表示出來的最小單位，不是圖畫上的最小單位。一幅圖像通常包含成千上萬個像素，每個像素都有自己的顔色信息，它們緊密地組合在一起。由于人眼的錯覺，這些組合在一起的像素被當成一幅完整的圖像。當修改圖像的某區域，實際上是在修改該區域内的像素。對這些像素修改的好與壞将決定最終圖片的質量。單位面積内的像素越多，圖像的效果就越好。彩色電視圖像是由成千個像素點所組成的，而且每個像素都是由紅綠藍三種顔色并排組成的。(注意每個像素的大小是不固定的，他是根據設備的分辨率決定的，知識點，後面要考)

1.2.2 什麼叫分辨率呢?

屏幕分辨率是指縱橫向上的像素點數，單位是px。屏幕分辨率确定計算機屏幕上顯示多少信息的設置，以水平和垂直像素來衡量。就相同大小的屏幕而言，當屏幕分辨率低時（例如 640 x 480），在屏幕上顯示的像素少，單個像素尺寸比較大。屏幕分辨率高時（例如 1600 x 1200），在屏幕上顯示的像素多，單個像素尺寸比較小。

知道什麼叫做分辨率後，有人就會奇怪，我記得蘋果的蘋果官網上的蘋果6的分辨率為750x1334啊，但是設計稿上蘋果6的分辨率為375x667啊,而且各個設備的分辨率都比實際分辨率小很多，這就牽扯到一些曆史原因了

1.2.3 設備物理分辨率（設備像素）

相信我們所有前端開發者，都是見證了手機這個移動設備發展的過程。從藍屏手機，到彩屏手機，到諾基亞研發出來觸屏手機，再到智能手機一步步發展下來，我們的我們的手越來越清晰，越來越大，所以我們的屏幕發展也越來越迅速。

上圖可以清楚的看到，不同分辨率所帶來的的差距

從最初的顆粒感相當大的屏幕，到720p再到1080p，甚至于現在各家旗艦手機的2k屏幕，我們的物理分辨率在變得越來越大。這樣就暴露出來一個問題，我們如果手機分辨率翻倍，我們的圖像不就要被縮小一倍，我們難道要在每個設備上就出個設計稿，每個設備的分辨不盡相同啊，其實你擔憂的問題，我們的喬幫主在很多年前就想到了。這就是我們的邏輯分辨率

1.2.4 邏輯分辨率（設備獨立像素）

如下圖所示，雖然設備物理分辨不同，但是他的這個邏輯分辨率卻都差不多，這就要感謝喬幫主了

喬布斯在iPhone4的發布會上首次提出了Retina Display(視網膜屏幕)的概念，在iPhone4使用的視網膜屏幕中，把2x2個像素當1個像素使用，這樣讓屏幕看起來更精緻，但是元素的大小卻不會改變。從此以後高分辨率的設備，多了一個邏輯像素。這些設備邏輯像素的差别雖然不會跨度很大，但是仍然有點差别，于是便誕生了移動端頁面需要适配這個問題，既然邏輯像素由物理像素得來，那他們就會有一個像素比值

1.2.5 設備像素比

設備像素比device pixel ratio簡稱dpr，即物理像素和設備獨立像素的比值。為什麼要知道設備像素比呢？因為這個像素比會産生一個非常經典的問題，1像素邊框的問題。

1px邊框問題

當我們css裡寫的1px的時候，由于它是邏輯像素，導緻我們的邏輯像素根據這個設備像素比（dpr）去映射到設備上就為2px，或者3px，由于每個設備的屏幕尺寸不一樣，就導緻每個物理像素渲染出來的大小也不同（記得上面的知識點嗎，設備的像素大小是不固定的），這樣如果在尺寸比較大的設備上，1px渲染出來的樣子相當的粗礦，這就是經典的一像素邊框問題

如何解決

核心思路，就是 在web中，浏覽器為我們提供了window.devicePixelRatio來幫助我們獲取dpr。在css中，可以使用媒體查詢min-device-pixel-ratio，區分dpr： 我們根據這個像素比，來算出他對應應該有的大小,但是暴露個非常大的兼容問題

其中Chrome把0.5px四舍五入變成了1px，而firefox/safari能夠畫出半個像素的邊，并且Chrome會把小于0.5px的當成0，而Firefox會把不小于0.55px當成1px，Safari是把不小于0.75px當成1px，進一步在手機上觀察iOS的Chrome會畫出0.5px的邊，而安卓(5.0)原生浏覽器是不行的。所以直接設置0.5px不同浏覽器的差異比較大，并且我們看到不同系統的不同浏覽器對小數點的px有不同的處理。所以如果我們把單位設置成小數的px包括寬高等，其實不太可靠，因為不同浏覽器表現不一樣。

至于其他解決一像素邊框問題網上有一堆答案，在這裡我推薦一種非常好用，并且沒有副作用的解決方案

• transform: scale(0.5) 方案

div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; }

css根據設備像素比媒體查詢後的解決方案

/* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } }

如此，完美的解決一像素看着粗的問題

二、如何适配

2.1 viewport

視口(viewport)代表當前可見的計算機圖形區域。在Web浏覽器術語中，通常與浏覽器窗口相同，但不包括浏覽器的UI， 菜單欄等——即指你正在浏覽的文檔的那一部分。

那麼在移動端如何配置視口呢？ 簡單的一個meta标簽即可！

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

他們分别什麼含義呢？

我們在移動端視口要想視覺效果和體驗好，那麼我們的視口寬度必須無限接近理想視口

理想視口：一般來講，這個視口其實不是真是存在的，它對設備來說是一個最理想布局視口尺寸，在用戶不進行手動縮放的情況下，可以将頁面理想地展示。那麼所謂的理想寬度就是浏覽器（屏幕）的寬度了。

于是上述的meta設置，就是我們的理想設置，他規定了我們的視口寬度為屏幕寬度，初始縮放比例為1，就是初始時候我們的視覺視口就是理想視口！

其中user-scalable設置為no 可以解決移動端點擊事件延遲問題（拓展）

2.2 解決适配方法

2.2.1 rem适配

rem是CSS3新增的一個相對單位，這個單位引起了廣泛關注。這個單位與em有什麼區别呢？區别在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的隻是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到隻修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有浏覽器均已支持rem。對于不支持它的浏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些浏覽器會忽略用rem設定的字體大小

舉個例子：

//假設我給根元素的大小設置為14px html{ font-size：14px } //那麼我底下的p标簽如果想要也是14像素 p{ font-size:1rem } //如此即可

rem的布局 不得不提flexible，flexible方案是阿裡早期開源的一個移動端适配解決方案，引用flexible後，我們在頁面上統一使用rem來布局。

他的原理非常簡單

// set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem 'px' } setRemUnit();

rem 是相對于html節點的font-size來做計算的。所以在頁面初始話的時候給根元素設置一個font-size，接下來的元素就根據rem來布局，這樣就可以保證在頁面大小變化時，布局可以自适應，

如此我們隻需要給設計稿的px轉換成對應的rem單位即可

當然，這個方案隻是個過渡方案，為什麼說是過渡方案

因為當年viewport在低版本安卓設備上還有兼容問題，而vw，vh還沒能實現所有浏覽器兼容，所以flexible方案用rem來模拟vmin來實現在不同設備等比縮放的“通用”方案，之所以說是通用方案,是因為他這個方案是根據設備大小去判斷頁面的展示空間大小即屏幕大小，然後根據屏幕大小去百分百還原設計稿，從而讓人看到的效果(展示範圍)是一樣的，這樣一來，蘋果5 和蘋果6p屏幕如果你按照設計稿還原的話，字體大小實際上不一樣，而人們在一樣的距離上希望看到的大小其實是一樣的，本質上，用戶使用更大的屏幕，是想看到更多的内容，而不是更大的字。

so，這個用縮放來解決問題的方案是個過渡方案，注定時代所淘汰

2.2.2 vw，vh布局

vh、vw方案即将視覺視口寬度 window.innerWidth和視覺視口高度 window.innerHeight 等分為 100 份。

vh和vw方案和rem類似也是相當麻煩需要做單位轉化，而且px轉換成vw不一定能完全整除，因此有一定的像素差。

不過在工程化的今天，webpack解析css 的時候用postcss-loader 有個postcss-px-to-viewport能自動實現px到vw的轉化

{ loader: 'postcss-loader', options: { plugins: ()=>[ require('autoprefixer')({ browsers: ['last 5 versions'] }), require('postcss-px-to-viewport')({ viewportWidth: 375, //視口寬度（數字) viewportHeight: 1334, //視口高度（數字） unitPrecision: 3, //設置的保留小數位數（數字） viewportUnit: 'vw', //設置要轉換的單位（字符串） selectorBlackList: ['.ignore', '.hairlines'], //不需要進行轉換的類名（數組） minPixelValue: 1, //設置要替換的最小像素值（數字） mediaQuery: false //允許在媒體查詢中轉換px（true/false） }) ] }

2.2.3 px為主，vx和vxxx（vw/vh/vmax/vmin）為輔，搭配一些flex（推薦）

之所以推薦使用此種方案，是由于我們要去考慮用戶的需求，用戶之所以去買大屏手機，不是為了看到更大的字，而是為了看到更多的内容，這樣直接使用px是最明智的方案，使用vw，rem等布局手段無可厚非，但是，flex這種彈性布局大行其道的今天，如果如果還用這種傳統的思維去想問題顯然是有兩個原因（個人認為px是最好的，可能有大佬，能用vw，或者rem寫出精妙的布局，也說不準）：

1. 為了偷懶，不願意去做每個手機的适
2. 不願意去學習新的布局方式，讓flex等先進的布局和你擦肩而過

2.3 移動端适配流程

1. 在head 設置width=device-width的viewport‘
2. 在css中使用px
3. 在适當的場景使用flex布局，或者配合vw進行自适應
4. 在跨設備類型的時候（pc <-> 手機 <-> 平闆）使用媒體查詢
5. 在跨設備類型如果交互差異太大的情況，考慮分開項目開發

最後

在這裡就還分享一份由大佬親自收錄整理的學習PDF 架構視頻 面試文檔 源碼筆記，高級架構技術進階腦圖、Android開發面試專題資料，高級進階架構資料

這些都是我現在閑暇時還會反複翻閱的精品資料。裡面對近幾年的大廠面試高頻知識點都有詳細的講解。相信可以有效地幫助大家掌握知識、理解原理，幫助大家在未來取得一份不錯的答卷。

當然，你也可以拿去查漏補缺，提升自身的競争力。

真心希望可以幫助到大家，Android路漫漫，共勉！

如果你有需要的話，隻需私信我【進階】即可獲取

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部