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