移動端適配你瞭解多少（一）

寫在前面~

• css像素：代碼中使用的邏輯像素，衡量頁面上的內容大小
• 設備像素：即物理像素，控制設備顯示的單位，與設備、硬件有關
• 設備獨立像素：與設備無關的邏輯像素，不一樣於設備像素（物理像素），不是真實存在的。
• 設備像素比：定義設備像素與設備獨立像素比的關係window.devicePixelRatio）設備像素比=物理像素/設備獨立像素
• 分辨率：指的是屏幕上垂直和水平的總物理像素

好像面試問移動端適配還挺多的，在網上查找了不少資料（侵刪），總結一下：

1. px + viewport適配
2. rem佈局
   CSS3媒體查詢適配
   基於設計圖的rem佈局
   基於屏幕百分比的rem佈局
   小程序的rpx佈局
3. vw佈局

（1）經過媒體查詢的方式即CSS3的meida queries
    （2）以天貓首頁爲表明的 flex 彈性佈局
    （3）以淘寶首頁爲表明的 rem+viewport縮放
    （4）rem 方式

1、px + viewport適配

  經過動態設置meta標籤的viewport讓css中的1px等於設備的1px。

  首先咱們必需要了解到viewport是什麼，viewport是用戶的網頁可視區域。手機瀏覽器就是頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的窗口比屏幕寬，這樣就不會破壞沒有針對手機瀏覽器優化的網頁的佈局（不會把每一個網頁擠到很小的窗口中）。用戶能夠經過平移和縮放來看網頁的不一樣部分。

  一般viewport是指視窗、視口，瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域。在移動端和pc端視口是不一樣的，pc端的視口是瀏覽器窗口區域，而在移動端有三個不一樣的視口概念：佈局視口、視覺視口、理想視口

佈局視口：在瀏覽器窗口css的佈局區域，佈局視口的寬度限制css佈局的寬。爲了能在移動設備上正常顯示那些爲pc端瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或其餘值，通常都比移動端瀏覽器可視區域大不少，因此就會出現瀏覽器出現橫向滾動條的狀況

視覺視口：用戶經過屏幕看到的頁面區域，經過縮放查看顯示內容的區域，在移動端縮放不會改變佈局視口的寬度，當縮小的時候，屏幕覆蓋的css像素變多，視覺視口變大，當放大的時候，屏幕覆蓋的css像素變少，視覺視口變小。

理想視口：通常來說，這個視口其實不是真實存在的，它對設備來講是一個最理想佈局視口尺寸，在用戶不進行手動縮放的狀況下，能夠將頁面理想地展現。那麼所謂的理想寬度就是瀏覽器（屏幕）的寬度了。

設置理想視口就在header中加入這樣一行代碼：

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

2、rem佈局

1.CSS3媒體查詢適配 meida queries

經過查詢設備的寬度來執行不一樣的 css 代碼，最終達到界面的配置

@media screen and (max-width: 320px){....適配iphone4的css樣式}@media screen and (max-width: 375px){ ....適配iphone6/7/8的css樣式}@media screen and (max-width: 414px){....適配iphone6/7/8 plus的css樣式}......

優勢：

• media query能夠作到設備像素比的判斷，方法簡單，成本低，特別是對 移動和PC維護同一套代碼的時候。目前像Bootstrap等框架使用這種方式 佈局
• 方法簡單，只需修改css文件
• 調整屏幕寬度時不用刷新頁面就能夠響應頁面佈局

缺點：

• 代碼量大，不方便維護
• 不可以徹底適配全部的屏幕尺寸，須要編寫多套css樣式
• 爲了兼顧大屏幕或高清設備，會形成其餘設備資源浪費，特別是加載圖片資源
• 爲了兼顧移動端和PC端各自響應式的展現效果，不免會損失各自特有的交互方式

2.基於設計圖的rem佈局

  一般咱們拿到的設計圖寬度的是750也就是基於iphone6/7/8的設計圖，咱們若是要想讓1px像素等於設計圖的1px該怎麼作呢？

  其實很簡單，直接讓根元素的font-size: 0.5px便可（由於是2倍圖，1px等於2實際像素，因此爲0.5px）。可是市面上的機型不必定都是750px的，這個時候咱們就要進行等比縮放了。

html.fontSize = clientWidth / 750

還有一個小問題，日常開發都是基於谷歌chorme開發的，chrome並不支持font-size小於12的字體。因此可讓font-size大於12，在以上基礎上將結果放大100倍，而後寫樣式的時候再除以100。嗯~看到這裏我以爲很繞啊，不過開始放在這裏了。
js僞代碼：

html.fontSize = clientWidth / 750 * 100

樣式：

.element {width: 0.1rem; /* 實際到6/7/8上就是10px */}

3.基於屏幕百分比的rem佈局

  這種方式是給元素設置百分比，例如2個div想佔滿寬度100%，那麼一個div設置寬度爲50%，這樣不固定寬度，使得在不一樣的分辨率下都能達到適配。
  各子元素或屬性的百分比設定計算：
1.子元素width、height的百分比:子元素的width或height中使用百分比，是相對於子元素的直接父元素
2.margin和padding的百分比：在垂直方向和水平方向都是相對於直接父親元素的width，而與父元素的height無關
3.border-radius的百分比：border-radius的百分比是相對於自身寬度，與父元素無關
優勢：

• 寬度自適應，在不一樣的分辨率下都能達到適配

缺點：

• 百分比的值很差計算
• 須要肯定父級的大小，由於要根據父級的大小進行計算 各個屬性中若是使用百分比，相對父元素的屬性並非惟一的
• 高度很差設置，通常須要固定高度

4. 小程序的rpx佈局

  小程序有個rpx能夠根據屏幕自適應。官方文檔的介紹：能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素，也就是說，它內部的實現原理其實和基於設計圖的rem佈局的原理差很少。

  只不太小程序內部處理了一下，讓rpx直接可以根據屏幕寬度自適應，而不是像rem那樣依賴於根元素的font-size.

3、VM佈局

css3中引入與視口有關的新的單位vw和vh，vw表示相對於視口的寬度，vh表示相對於視口高度。

那麼問題來了，平時咱們拿到的設計圖都是基於px標記的，怎麼將px轉爲vw呢？
vw單位換算：視口寬度爲100vw佔滿整個視口區域，那麼1vw至關於佔整個視口寬度的1%，因此1px= 1/375*100 vw
全部的頁面元素均可以直接進行計算換算成vw單位，可是這樣計算和百分比方案計算比較相似，都會比較麻煩。
可是有一個比較厲害的插件—— postcss-px-to-viewport，能夠預處理css,將px單位轉換爲vw單位，可是須要進行一些相關的webpack配置。詳情可看上方連接官方配置解釋。

{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})]}

優勢：

• 指定vw\vh相對與視口的寬高，由px換算單位成vw單位比較簡單
• 經過postcss-px-to-viewport插件進行單位轉換比較方便

缺點：

• 直接進行單位換算時百分比可能出現小數,計算不方便
• 兼容性- 大多數瀏覽器都支持、ie11不支持
• 少數低版本手機系統 ios八、android4.4如下不支持