當(dāng)前位置：首頁(yè) > 科技 > 軟件

針對(duì)尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實(shí)踐！

來(lái)源：責(zé)編：時(shí)間：2024-04-22 09:13:37 190觀看

導(dǎo)讀Hello，大家好，我是 Sunday。響應(yīng)式適配是日常開(kāi)發(fā)中非常常見(jiàn)的問(wèn)題，所以在面試中可能會(huì)被經(jīng)常問(wèn)到。但是很多同學(xué)卻沒(méi)有專門了解過(guò)這方面的知識(shí)，導(dǎo)致被問(wèn)到這方面問(wèn)題的時(shí)候，回答并不盡如人意。所以，今天咱們就把整個(gè)響應(yīng)式

Hello，大家好，我是 Sunday。

響應(yīng)式適配是日常開(kāi)發(fā)中非常常見(jiàn)的問(wèn)題，所以在面試中可能會(huì)被經(jīng)常問(wèn)到。但是很多同學(xué)卻沒(méi)有專門了解過(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ì)字體大?。?nbsp;盡量使用 rem 單位，配合動(dòng)態(tài) rem 計(jì)算進(jìn)行處理。
針對(duì)寬、高：盡量使用 vw + vh 單位，避免復(fù)合效應(yīng)

本文鏈接：http://www.www897cc.com/showinfo-26-84463-0.html針對(duì)尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實(shí)踐！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： React 中，用到的幾種淺比較方式及其比較成本科普

下一篇： Gopher的Rust第一課：Rust的那些事兒

標(biāo)簽：

熱門焦點(diǎn)

MIX Fold3包裝盒泄露新機(jī)本月登場(chǎng)

小米的全新折疊屏旗艦MIX Fold3將于本月發(fā)布，近日該機(jī)的真機(jī)包裝盒在網(wǎng)上泄露。從圖上來(lái)看，新的MIX Fold3包裝盒在外觀設(shè)計(jì)方面延續(xù)了之前的方案，變化不大，這也是目前小米旗艦
十個(gè)可以手動(dòng)編寫的 JavaScript 數(shù)組 API

JavaScript 中有很多API，使用得當(dāng)，會(huì)很方便，省力不少。你知道它的原理嗎? 今天這篇文章，我們將對(duì)它們進(jìn)行一次小總結(jié)。現(xiàn)在開(kāi)始吧。1.forEach()forEach()用于遍歷數(shù)組接收一參
三分鐘白話RocketMQ系列—— 如何發(fā)送消息

我們知道RocketMQ主要分為消息生產(chǎn)、存儲(chǔ)（消息堆積）、消費(fèi) 三大塊領(lǐng)域。那接下來(lái)，我們白話一下，RocketMQ是如何發(fā)送消息的，揭秘消息生產(chǎn)全過(guò)程。注意，如果白話中不小心提到相關(guān)代
2023年，我眼中的字節(jié)跳動(dòng)

此時(shí)此刻（2023年7月），字節(jié)跳動(dòng)從未上市，也從未公布過(guò)任何官方的上市計(jì)劃；但是這并不妨礙它成為中國(guó)最受關(guān)注的互聯(lián)網(wǎng)公司之一。從2016-17年的抖音強(qiáng)勢(shì)崛起，到2018年的“頭騰
小米汽車電池信息疑似曝光：容量101kWh，支持800V高壓快充

7月14日消息，今日一名博主在社交媒體發(fā)布了一張疑似小米汽車電池信息的照片，顯示該電池包正是寧德時(shí)代麒麟電池，容量為101kWh，電壓為726.7V，可以預(yù)測(cè)小
華為HarmonyOS 4升級(jí)計(jì)劃公布：首批34款機(jī)型今日開(kāi)啟公測(cè)

8月4日消息，今天下午華為正式發(fā)布了HarmonyOS 4系統(tǒng)，在更流暢的前提下，還帶來(lái)了不少新功能，UI設(shè)計(jì)也有變化，會(huì)讓手機(jī)煥然一新。華為宣布，首批機(jī)型將會(huì)在
華為Mate60標(biāo)準(zhǔn)版細(xì)節(jié)曝光：經(jīng)典星環(huán)相機(jī)模組回歸

這段時(shí)間以來(lái)，關(guān)于華為新旗艦的爆料日漸密集。據(jù)此前多方爆料，今年華為將開(kāi)始恢復(fù)一年雙旗艦戰(zhàn)略，除上半年推出的P60系列外，往年下半年的Mate系列也將
iQOO 11S評(píng)測(cè)：行業(yè)唯一的200W標(biāo)準(zhǔn)版旗艦

【Techweb評(píng)測(cè)】去年底，iQOO推出了“電競(jìng)旗艦”iQOO 11系列，作為一款性能強(qiáng)機(jī)，該機(jī)不僅全球首發(fā)2K 144Hz E6全感屏，搭載了第二代驍龍8平臺(tái)及144Hz電競(jìng)
北京：科技教育體驗(yàn)基地開(kāi)始登記

　　北京“科技館之城”科技教育體驗(yàn)基地登記和認(rèn)證工作日前啟動(dòng)。首批北京科技教育體驗(yàn)基地?cái)M于2023年全國(guó)科普日期間掛牌，后續(xù)還將開(kāi)展常態(tài)化登記?！　”本┛萍冀逃w驗(yàn)基

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

針對(duì)尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實(shí)踐！

01：為什么不要使用 px？

02：應(yīng)該使用什么？

2.1：rem 與 em

2.2：ViewProt

2.3：百分比（%）

3：最佳實(shí)踐

MIX Fold3包裝盒泄露新機(jī)本月登場(chǎng)

十個(gè)可以手動(dòng)編寫的 JavaScript 數(shù)組 API

三分鐘白話RocketMQ系列—— 如何發(fā)送消息

2023年，我眼中的字節(jié)跳動(dòng)

小米汽車電池信息疑似曝光：容量101kWh，支持800V高壓快充

華為HarmonyOS 4升級(jí)計(jì)劃公布：首批34款機(jī)型今日開(kāi)啟公測(cè)

華為Mate60標(biāo)準(zhǔn)版細(xì)節(jié)曝光：經(jīng)典星環(huán)相機(jī)模組回歸

iQOO 11S評(píng)測(cè)：行業(yè)唯一的200W標(biāo)準(zhǔn)版旗艦

北京：科技教育體驗(yàn)基地開(kāi)始登記

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊

針對(duì)尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實(shí)踐！

01：為什么不要使用 px？

02：應(yīng)該使用什么？

2.1：rem 與 em

2.2：ViewProt

2.3：百分比（%）

3：最佳實(shí)踐

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊

針對(duì)尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實(shí)踐！

02：應(yīng)該使用什么？