針對尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實踐！
Hello，大家好，我是 Sunday。
響應(yīng)式適配是日常開發(fā)中非常常見的問題，所以在面試中可能會被經(jīng)常問到。但是很多同學(xué)卻沒有專門了解過這方面的知識，導(dǎo)致被問到這方面問題的時候，回答并不盡如人意。
所以，今天咱們就把整個響應(yīng)式適配的問題、方案 好好梳理一遍，徹底幫助大家解決這個問題。
01、為什么不要使用 px？
屏幕上顯示的所有內(nèi)容都由像素組成。但是，不同的手機屏幕在 大小、方向、縮放級別和像素上都不相同。比如：Iphone15 和 Iphone15Plus。
圖片
所以，這就會導(dǎo)致在一個屏幕上看起來完美的布局在另一個屏幕上可能會 “破板”。
假設(shè)：一個寬度為 600px 的 div，在設(shè)計中它應(yīng)該占據(jù)屏幕的一半。但是當(dāng)你遇到不同的 屏幕 時（4K、1080P、或者 手機）那么這固定的 600px 是無法占據(jù)整個屏幕一半的寬度的。
那么這就會導(dǎo)致咱們剛才所說的 “破板” 問題，因此我們不應(yīng)該使用 px 作為尺寸單位。
02、應(yīng)該使用什么？
為此 css 提供了很多的尺寸單位來代替 px，如：rem、em、vh、vw...
所以接下來咱們就分別來看看這些尺寸單位代表的都是什么意思，以及應(yīng)用場景
2.1 rem 與 em
- rem：“root em”，即：html 根標(biāo)簽的 fontsize 大小。
- em：相對于父元素的 fontsize 大小
在響應(yīng)式的開發(fā)中，更加推薦使用 rem 而 非em，原因如下：
- 根相對： rem單位相對于根 (<html>) 元素的字體大小
- 可擴展性： 更改根元素的字體大小可以縮放整個網(wǎng)站中指定的大小rem，從而可以更輕松地調(diào)整不同屏幕尺寸的布局并提高可訪問性。
- 默認(rèn)大?。?nbsp;默認(rèn)大小 1rem 通常等于 16 像素，除非根元素的字體大小明確設(shè)置為不同的值。
- 一致性： 使用rem單位有助于在整個網(wǎng)站上保持一致的大小調(diào)整，因為它避免了使用em單位出現(xiàn)的 "復(fù)合效應(yīng)（即由于嵌套關(guān)系，大小會被動的根據(jù)祖先元素增大或減小）"。
在日常開發(fā)中，我們可以直接通過如下代碼來控制 html 根標(biāo)簽 fontsize 動態(tài)變化：
/**
* 初始化 rem 基準(zhǔn)值，最大為 40px
*/
export const useREM = () => {
// 定義最大的 fontSize
const MAX_FONT_SIZE = 40
// 監(jiān)聽 html 文檔被解析完成的事件
document.addEventListener('DOMContentLoaded', () => {
// 獲取 html 標(biāo)簽
const html = document.querySelector('html')
// 獲取根元素 fontSize 標(biāo)準(zhǔn)，屏幕寬度 / 10。（以 Iphone 為例 Iphone 6 屏幕寬度為 375，則標(biāo)準(zhǔn) fontSize 為 37.5）
let fontSize = window.innerWidth / 10
// 獲取到的 fontSize 不允許超過我們定義的最大值
fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
// 定義根元素（html）fontSize 的大小 （rem）
html.style.fontSize = fontSize + 'px'
})
}2.2 ViewProt
視口單位（ViewProt）表示用戶瀏覽器窗口的大小。它有兩個常用的尺寸單位：
- vw：表示視口寬度的百分比，即：1vw 代表視口寬度的 1%
- vh：表示視口高度的百分比，即：1vh 代表視口高度的 1%
除此之外，還有兩個標(biāo)記單位：vmin 和 vmax 。表示基于視口的最小和最大尺寸。
- vmin（視口最小值）：表示視口較小尺寸（寬度或高度）的百分比。 1 vmin 等于視口較小尺寸的 1%。如果視口寬度為 1000px，高度為 800px，則 1vmin 為 8px。
- vmax（視口最大值）：表示視口較大尺寸（寬度或高度）的百分比。 1 vmax 等于視口較大尺寸的 1%。如果視口寬度為 1000 像素，高度為 800 像素，則 1vmax 為 10 像素。
2.3 百分比（%）
百分比 永遠(yuǎn)相對于父元素 的大小的。它允許相對于父元素的大小定義大小、邊距、填充和其他屬性，而不是固定的。因此，所有的 百分比（%） 都會帶來 復(fù)合效應(yīng)（即由于嵌套關(guān)系，大小會被動的根據(jù)祖先元素增大或減?。?問題
.container {
width: 50%; /* 容器將占據(jù)其父容器寬度的50% */
}
.background-element {
background-position: 50% 50%; /* 將背景圖像置于中心 */
}3、最佳實踐
關(guān)于尺寸單位的處理有很多的方式，以下是很多公司最常見的一種處理方式：
- 針對字體大?。?nbsp;盡量使用 rem 單位，配合 動態(tài) rem 計算進行處理。
- 針對寬、高：盡量使用 vw + vh 單位，避免 復(fù)合效應(yīng)。
