移動端適配

如何適配

viewport

viewport 設定理想視口

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

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

理想視口：一般來講，這個視口其實不是真是存在的，它對裝置來說是一個最理想佈局視口尺寸，在使用者不進行手動縮放的情況下，可以將頁面理想地展示。那麼所謂的理想寬度就是瀏覽器（螢幕）的寬度了。

於是上述的meta設定，就是我們的理想設定，他規定了我們的視口寬度為螢幕寬度，初始縮放比例為1，就是初始時候我們的視覺視口就是理想視口！
其中user-scalable設定為no 可以解決移動端點選事件延遲問題（拓展）

解決適配方法

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，這個用縮放來解決問題的方案是個過渡方案，註定時代所淘汰

vw，vh佈局

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

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

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

移動端適配流程

1. 在head 設定width=device-width的viewport
2. 在css中使用px
3. 在適當的場景使用flex佈局，或者配合vw進行自適應
4. 在跨裝置型別的時候（pc <-> 手機 <-> 平板）使用媒體查詢
5. 在跨裝置型別如果互動差異太大的情況，考慮分開專案開發

面試官：你瞭解過移動端適配嗎？