適配思路
設計稿（750*1334） ---> 開發 ---> 適配不同的手機屏幕，使其顯得合理
原則
- 開發時方便，寫代碼時設置的值要和標注的 160px 相關
- 方案要適配大多數手機屏幕，並且無 BUG
- 用戶體驗要好，頁面看着沒有不適感
思路
- 寫頁面時，按照設計稿寫固定寬度，最后再統一縮放處理，在不同手機上都能用
- 按照設計稿的標准開發頁面，在手機上部分內容根據屏幕寬度等比縮放，部分內容按需要變化，需要縮放的元素使用 rem, vw 相對單位，不需要縮放的使用 px
- 固定尺寸+彈性布局，不需要縮放
viewport 適配
根據設計稿標准（750px 寬度）開發頁面，寫完后頁面及元素自動縮小，適配 375 寬度的屏幕
在 head 里設置如下代碼
<meta name="viewport" content="width=750,initial-scale=0.5">
initial-scale = 屏幕的寬度 / 設計稿的寬度
為了適配其他屏幕，需要動態的設置 initial-scale 的值
<head>
<script>
const WIDTH = 750
const mobileAdapter = () => {
let scale = screen.width / WIDTH
let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
let meta = document.querySelector('meta[name=viewport]')
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content',content)
}
mobileAdapter()
window.onorientationchange = mobileAdapter //屏幕翻轉時再次執行
</script>
</head>
缺點就是邊線問題，不同尺寸下，邊線的粗細是不一樣的（等比縮放后），全部元素都是等比縮放，實際顯示效果可能不太好
vw 適配（部分等比縮放）
- 開發者拿到設計稿（假設設計稿尺寸為750px，設計稿的元素標注是基於此寬度標注）
- 開始開發，對設計稿的標注進行轉換，把px換成vw。比如頁面元素字體標注的大小是32px，換成vw為 (100/750)*32 vw
- 對於需要等比縮放的元素，CSS使用轉換后的單位
- 對於不需要縮放的元素，比如邊框陰影，使用固定單位px
關於換算，為了開發方便，利用自定義屬性，CSS變量
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750
//:root { --width: 0.133333 } 1像素等於多少 vw
document.documentElement.style.setProperty('--width', (100 / WIDTH))
</script>
</head>
注意此時，meta 里就不要去設置縮放了
業務代碼里就可以寫
header {
font-size: calc(28vw * var(--width))
}
實現了按需縮放
rem 適配
- 開發者拿到設計稿（假設設計稿尺寸為750px，設計稿的元素標是基於此寬度標注）
- 開始開發，對設計稿的標注進行轉換
- 對於需要等比縮放的元素，CSS使用轉換后的單位
- 對於不需要縮放的元素，比如邊框陰影，使用固定單位px
假設設計稿的某個字體大小是 40px, 手機屏幕上的字體大小應為 420/750*40 = 22.4px (體驗好)，換算成 rem（相對於 html 根節點，假設 html 的 font-size = 100px,）則這個字體大小為 0.224 rem
寫樣式時，對應的字體設置為 0.224 rem 即可，其他元素尺寸也做換算...
但是有問題
舉個 ，設計稿的標注 是40px，寫頁面時還得去做計算，很麻煩（全部都要計算）
能不能規定一下，看到 40px ,就應該寫 40/100 = 0.4 rem,這樣看到就知道寫多少了（不用計算），此時的 html 的 font-size 就不能是 100px 了，應該為 (420*100)/750 = 56px，100為我們要規定的那個參數
根據不同屏幕寬度，設置 html 的 font-size 值
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //設計稿尺寸
const setView = () => {
document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
</head>
對於需要等比縮放的元素，CSS使用轉換后的單位
header { font-size: .28rem; }
對於不需要縮放的元素，比如邊框陰影，使用固定單位px
header > span.active { color: #fff; border-bottom: 2px solid rgba(255, 255, 255, 0.3); }
假設 html 的 font size = 1px 的話，就可以寫 28 rem 了，更方便了，但是瀏覽器對字體大小有限制，設為 1px 的話，在瀏覽器中是失效的，會以 12px（或者其他值） 做一個計算 , 就會得到一個很誇張的結果，所以可以把 html 寫的大一些
使用 sass 庫時
JS 處理還是一樣的，但看着好看些
@function px2rem($px) { @return $px * 1rem / 100; } header { font-size: px2rem(28); }
以上的三種適配方案，都是等比縮放，放到 ipad 上時（設計稿以手機屏幕設計的），頁面元素會很大很丑，有些場景下，並不需要頁面整體縮放（viewport 自動處理的也很好了），所以有時只需要合理的布局即可。
彈性盒適配（合理布局）
<meta name="viewport" content="width=device-width">
使用 flex 布局
section {
display: flex;
}
總結一下，什么樣的頁面需要做適配（等比縮放）呢
- 頁面中的布局是柵格化的
換了屏幕后，到底有多寬多高很難去做設置，整體的都需要改變，所以需要整體的縮放
- 頭屏大圖，寬度自適應，高度固定的話，對於不同的屏幕，形狀就會發生改變（放到ipad上就變成長條了），寬度變化后，高度也要保持等比例變化
以上所有的適配都是寬度的適配，但是在某些場景下，也會出現高度的適配
比如大屏，需要適配很多的電視尺寸，要求撐滿屏幕，不能有滾動條，此時若換個屏幕
此時需要考慮小元素用 vh, 寬和高都用 vh 去表示，中間的大塊去自適應，這就做到了大屏的適配，屏幕變小了，整體變小了（體驗更好），中間這塊撐滿了屏幕
對於更復雜的場景，需要更靈活考慮，沒有一種適配方式可以囊括所有場景。