AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

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

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

來源： 責(zé)編： 時(shí)間：2024-04-22 09:13:37 183觀看
導(dǎo)讀Hello，大家好，我是 Sunday。響應(yīng)式適配是日常開發(fā)中非常常見的問題，所以在面試中可能會(huì)被經(jīng)常問到。但是很多同學(xué)卻沒有專門了解過這方面的知識，導(dǎo)致被問到這方面問題的時(shí)候，回答并不盡如人意。所以，今天咱們就把整個(gè)響應(yīng)式

Hello，大家好，我是 Sunday。sw028資訊網(wǎng)——每日最新資訊28at.com

響應(yīng)式適配是日常開發(fā)中非常常見的問題，所以在面試中可能會(huì)被經(jīng)常問到。但是很多同學(xué)卻沒有專門了解過這方面的知識，導(dǎo)致被問到這方面問題的時(shí)候，回答并不盡如人意。sw028資訊網(wǎng)——每日最新資訊28at.com

所以，今天咱們就把整個(gè)響應(yīng)式適配的問題、方案 好好梳理一遍，徹底幫助大家解決這個(gè)問題。sw028資訊網(wǎng)——每日最新資訊28at.com

01：為什么不要使用 px？

屏幕上顯示的所有內(nèi)容都由像素組成。但是，不同的手機(jī)屏幕在 大小、方向、縮放級別和像素上都不相同。比如：Iphone15 和 Iphone15Plus。sw028資訊網(wǎng)——每日最新資訊28at.com

圖片圖片sw028資訊網(wǎng)——每日最新資訊28at.com

所以，這就會(huì)導(dǎo)致在一個(gè)屏幕上看起來完美的布局在另一個(gè)屏幕上可能會(huì) “破板”。sw028資訊網(wǎng)——每日最新資訊28at.com

假設(shè)：一個(gè)寬度為 600px 的 div，在設(shè)計(jì)中它應(yīng)該占據(jù)屏幕的一半。但是當(dāng)你遇到不同的 屏幕 時(shí)（4K、1080P、或者 手機(jī)）那么這固定的 600px 是無法占據(jù)整個(gè)屏幕一半的寬度的。sw028資訊網(wǎng)——每日最新資訊28at.com

那么這就會(huì)導(dǎo)致咱們剛才所說的 “破板” 問題，因此我們不應(yīng)該使用 px 作為尺寸單位。sw028資訊網(wǎng)——每日最新資訊28at.com

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

為此 css 提供了很多的尺寸單位來代替 px，如：rem、em、vh、vw...sw028資訊網(wǎng)——每日最新資訊28at.com

所以接下來咱們就分別來看看這些尺寸單位代表的都是什么意思，以及應(yīng)用場景sw028資訊網(wǎng)——每日最新資訊28at.com

2.1：rem 與 em

  • rem：“root em”，即：html 根標(biāo)簽的 fontsize 大小。
  • em：相對于父元素的 fontsize 大小

在響應(yīng)式的開發(fā)中，更加推薦使用 rem 而 非em，原因如下：sw028資訊網(wǎng)——每日最新資訊28at.com

  • 根相對： rem單位相對于根 (<html>) 元素的字體大小
  • 可擴(kuò)展性： 更改根元素的字體大小可以縮放整個(gè)網(wǎng)站中指定的大小rem，從而可以更輕松地調(diào)整不同屏幕尺寸的布局并提高可訪問性。
  • 默認(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ù)祖先元素增大或減小）"。

在日常開發(fā)中，我們可以直接通過如下代碼來控制 html 根標(biāo)簽 fontsize 動(dòng)態(tài)變化：sw028資訊網(wǎng)——每日最新資訊28at.com

/** * 初始化 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）表示用戶瀏覽器窗口的大小。它有兩個(gè)常用的尺寸單位：sw028資訊網(wǎng)——每日最新資訊28at.com

  1. vw：表示視口寬度的百分比，即：1vw 代表視口寬度的 1%
  2. vh：表示視口高度的百分比，即：1vh 代表視口高度的 1%

除此之外，還有兩個(gè)標(biāo)記單位：vmin 和 vmax 。表示基于視口的最小和最大尺寸。sw028資訊網(wǎng)——每日最新資訊28at.com

  1. vmin（視口最小值）：表示視口較小尺寸（寬度或高度）的百分比。 1 vmin 等于視口較小尺寸的 1%。如果視口寬度為 1000px，高度為 800px，則 1vmin 為 8px。
  2. vmax（視口最大值）：表示視口較大尺寸（寬度或高度）的百分比。 1 vmax 等于視口較大尺寸的 1%。如果視口寬度為 1000 像素，高度為 800 像素，則 1vmax 為 10 像素。

2.3：百分比（%）

百分比 永遠(yuǎn)相對于父元素 的大小的。它允許相對于父元素的大小定義大小、邊距、填充和其他屬性，而不是固定的。因此，所有的 百分比（%） 都會(huì)帶來 復(fù)合效應(yīng)（即由于嵌套關(guān)系，大小會(huì)被動(dòng)的根據(jù)祖先元素增大或減小） 問題sw028資訊網(wǎng)——每日最新資訊28at.com

.container {  width: 50%; /* 容器將占據(jù)其父容器寬度的50% */}.background-element {  background-position: 50% 50%; /* 將背景圖像置于中心 */}

3：最佳實(shí)踐

關(guān)于尺寸單位的處理有很多的方式，以下是很多公司最常見的一種處理方式：sw028資訊網(wǎng)——每日最新資訊28at.com

  1. 針對字體大小： 盡量使用 rem 單位，配合 動(dòng)態(tài) rem 計(jì)算進(jìn)行處理。
  2. 針對寬、高：盡量使用 vw + vh 單位，避免 復(fù)合效應(yīng)

sw028資訊網(wǎng)——每日最新資訊28at.com

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

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

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

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

標(biāo)簽：
  • 熱門焦點(diǎn)
Top