31.1、幾何定位---簡單介紹
適配思路
設計稿（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 去表示，中間的大塊去自適應，這就做到了大屏的適配，螢幕變小了，整體變小了（體驗更好），中間這塊撐滿了螢幕