別再用 px 了！坑很多......
Hello，大家好，我是 Sunday。
響應(yīng)式適配，是前端開發(fā)中繞不開的一個話題。無論是做 H5、后臺管理系統(tǒng)，還是小程序，只要涉及到多端適配，基本就逃不過這一關(guān)。
但你知道嗎？這個我們天天接觸的東西，真正被問到時，很多同學(xué)卻答不上來。真正去寫的時候，很多同學(xué)寫的反而會有很大的問題。
比如：直接使用 px 來進(jìn)行布局！
雖然 px 是我們寫樣式時最熟悉的單位，但它根本不是為響應(yīng)式設(shè)計而生的。在實際開發(fā)中，尤其是移動端或者多端適配項目中，用 px 經(jīng)常會掉坑，踩雷踩到懷疑人生。
所以今天，我就帶你徹底搞懂：為什么別再用 px，我們到底該用什么，怎么用才是正解。
一、用 px 帶來的那些坑
很多同學(xué)說：“我用 px 沒出什么問題啊？”
是的，在你只面對一張設(shè)計稿、一個設(shè)備時，確實不覺得有什么問題。但當(dāng)頁面 放到不同屏幕尺寸、分辨率、縮放等級 的設(shè)備上，問題就來了。
圖片
來看個簡單例子，以上圖的 iPhone 設(shè)備為例：
你寫了一個寬度為 600px 的容器，設(shè)計稿上看著剛剛好，但一到 iPhone 上就炸板。放到 4K 屏上，dom 又會變得非常小，整個布局也跟著崩了。
這，就是 px 的“絕對性”帶來的坑。
出現(xiàn)這種情況的原因是因為：**px 是固定單位，跟設(shè)備無關(guān)！** 不同設(shè)備的屏幕寬度、DPR（設(shè)備像素比）不同，導(dǎo)致同樣的 px 值，在不同設(shè)備上呈現(xiàn)的效果完全不同。
二、前端適配該怎么做？
說白了，響應(yīng)式的核心就是：
用“相對單位”代替 “固定單位”，讓頁面根據(jù)設(shè)備自適應(yīng)變化。
CSS 給我們準(zhǔn)備了很多單位來解決這個問題，比如：
- rem、em：相對于字體大小的單位
- vw、vh、vmin、vmax：相對于視口尺寸的單位
- %：相對于父元素的單位
下面咱們一個個來看：
1. rem：相對根元素
推薦用于：字體大小、邊距、布局基礎(chǔ)尺寸
1rem = html 根元素的 font-size
通常情況下，我們可以通過 JS 動態(tài)設(shè)置 html 的 font-size，實現(xiàn)整體適配
代碼示例如下：
export const useREM = () => {
const MAX_FONT_SIZE = 40;
document.addEventListener("DOMContentLoaded", () => {
const html = document.querySelector("html");
let fontSize = window.innerWidth / 10;
fontSize = Math.min(fontSize, MAX_FONT_SIZE);
html.style.fontSize = fontSize + "px";
});
};這段代碼的意思就是：
頁面寬度除以 10，就是我們整個頁面的 1rem。
這樣一來，設(shè)計稿是 375px 寬，那就等于 1rem = 37.5px，其他尺寸都可以用 rem 表示，非常方便。
2. vw / vh：相對視口
推薦用于：寬高布局、大背景圖、卡片容器、輪播圖等
- 1vw = 視口寬度的 1%
- 1vh = 視口高度的 1%
舉例：
.banner {
width: 100vw; /* 寬度占滿整個視口 */
height: 30vh; /* 高度為視口高度的 30% */
}除此之外還有：vmin 和 vmax，適用于橫豎屏動態(tài)變化的場景。其中：
- vmin：視口中最小邊的 1%
- vmax：視口中最大邊的 1%
3. %：百分比單位
推薦用于：局部布局、子元素對齊、背景圖居中等
這里需要注意 % 和 vw、vh 不同。 % 是相對父元素的，如果父元素 沒有 設(shè)置寬度，子元素的 % 就沒意義，并且嵌套層級多時容易出 復(fù)合放大效應(yīng)。所以，% 雖然靈活，但不適合做全局適配方案的主力單位。
常見寫法：
.box {
width: 50%;
padding: 10%;
}
.background {
background-position: 50% 50%; /* 居中 */
}三、如何搭配使用？最佳實踐來了
那么最后，咱們就看下這些尺寸單位如何搭配進(jìn)行使用。
- 字體大小建議使用 rem ： 通過統(tǒng)一設(shè)置 html 根元素的 font-size，可以確保全站字體隨屏幕寬度自適應(yīng)
- 布局中的寬度和高度建議使用 vw 和 vh ：這兩個單位是相對于視口大小的百分比，天然具備響應(yīng)式特性，并且適配各類設(shè)備無需額外計算。
- 間距和邊距同樣推薦使用 rem ：這樣可以確保它們與字體保持一致的縮放比例
- 背景圖位置、元素對齊等局部布局場景中，可以使用 % 單位 ： 它相對于父元素，結(jié)合 position 屬性可以更好的控制元素的對齊與定位。
- 在需要應(yīng)對橫豎屏切換的場景下，可以使用 vmin 或 vmax 單位 ：它們分別代表視口寬度和高度中較小或較大的那個維度，能夠幫助我們在屏幕方向變化時仍保持最大視口下的展示效果
