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

當前位置:首頁 > 科技  > 軟件

針對尺寸單位,為什么不應該使用 px 作為尺寸單位?以及最佳實踐!

來源: 責編: 時間:2024-04-22 09:13:37 140觀看
導讀Hello,大家好,我是 Sunday。響應式適配是日常開發中非常常見的問題,所以在面試中可能會被經常問到。但是很多同學卻沒有專門了解過這方面的知識,導致被問到這方面問題的時候,回答并不盡如人意。所以,今天咱們就把整個響應式

Hello,大家好,我是 Sunday。yox28資訊網——每日最新資訊28at.com

響應式適配是日常開發中非常常見的問題,所以在面試中可能會被經常問到。但是很多同學卻沒有專門了解過這方面的知識,導致被問到這方面問題的時候,回答并不盡如人意。yox28資訊網——每日最新資訊28at.com

所以,今天咱們就把整個響應式適配的問題、方案 好好梳理一遍,徹底幫助大家解決這個問題。yox28資訊網——每日最新資訊28at.com

01:為什么不要使用 px?

屏幕上顯示的所有內容都由像素組成。但是,不同的手機屏幕在 大小、方向、縮放級別和像素上都不相同。比如:Iphone15 和 Iphone15Plus。yox28資訊網——每日最新資訊28at.com

圖片圖片yox28資訊網——每日最新資訊28at.com

所以,這就會導致在一個屏幕上看起來完美的布局在另一個屏幕上可能會 “破板”。yox28資訊網——每日最新資訊28at.com

假設:一個寬度為 600px 的 div,在設計中它應該占據屏幕的一半。但是當你遇到不同的 屏幕 時(4K、1080P、或者 手機)那么這固定的 600px 是無法占據整個屏幕一半的寬度的。yox28資訊網——每日最新資訊28at.com

那么這就會導致咱們剛才所說的 “破板” 問題,因此我們不應該使用 px 作為尺寸單位。yox28資訊網——每日最新資訊28at.com

02:應該使用什么?

為此 css 提供了很多的尺寸單位來代替 px,如:rem、em、vh、vw...yox28資訊網——每日最新資訊28at.com

所以接下來咱們就分別來看看這些尺寸單位代表的都是什么意思,以及應用場景yox28資訊網——每日最新資訊28at.com

2.1:rem 與 em

  • rem:“root em”,即:html 根標簽的 fontsize 大小。
  • em:相對于父元素的 fontsize 大小

在響應式的開發中,更加推薦使用 rem 而 非em,原因如下:yox28資訊網——每日最新資訊28at.com

  • 根相對: rem單位相對于根 (<html>) 元素的字體大小
  • 可擴展性: 更改根元素的字體大小可以縮放整個網站中指定的大小rem,從而可以更輕松地調整不同屏幕尺寸的布局并提高可訪問性。
  • 默認大?。?nbsp;默認大小 1rem 通常等于 16 像素,除非根元素的字體大小明確設置為不同的值。
  • 一致性: 使用rem單位有助于在整個網站上保持一致的大小調整,因為它避免了使用em單位出現的 "復合效應(即由于嵌套關系,大小會被動的根據祖先元素增大或減?。?。

在日常開發中,我們可以直接通過如下代碼來控制 html 根標簽 fontsize 動態變化:yox28資訊網——每日最新資訊28at.com

/** * 初始化 rem 基準值,最大為 40px */export const useREM = () => {  // 定義最大的 fontSize  const MAX_FONT_SIZE = 40  // 監聽 html 文檔被解析完成的事件  document.addEventListener('DOMContentLoaded', () => {    // 獲取 html 標簽    const html = document.querySelector('html')    // 獲取根元素 fontSize 標準,屏幕寬度 / 10。(以 Iphone 為例 Iphone 6 屏幕寬度為 375,則標準 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)表示用戶瀏覽器窗口的大小。它有兩個常用的尺寸單位:yox28資訊網——每日最新資訊28at.com

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

除此之外,還有兩個標記單位:vmin 和 vmax 。表示基于視口的最小和最大尺寸。yox28資訊網——每日最新資訊28at.com

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

2.3:百分比(%)

百分比 永遠相對于父元素 的大小的。它允許相對于父元素的大小定義大小、邊距、填充和其他屬性,而不是固定的。因此,所有的 百分比(%) 都會帶來 復合效應(即由于嵌套關系,大小會被動的根據祖先元素增大或減?。?問題yox28資訊網——每日最新資訊28at.com

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

3:最佳實踐

關于尺寸單位的處理有很多的方式,以下是很多公司最常見的一種處理方式:yox28資訊網——每日最新資訊28at.com

  1. 針對字體大小: 盡量使用 rem 單位,配合 動態 rem 計算進行處理。
  2. 針對寬、高:盡量使用 vw + vh 單位,避免 復合效應

yox28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-84463-0.html針對尺寸單位,為什么不應該使用 px 作為尺寸單位?以及最佳實踐!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

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

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

標簽:
  • 熱門焦點
Top