一文搞懂:viewpoint與rem、百分比、px

来源:https://www.cnblogs.com/yoyoj-home/p/18081856
-Advertisement-
Play Games

基礎與面試題:viewpoint 與 rem、百分比高度、px 一、定義 ​ 一個表總結: 名稱 定義 使用示例 viewpoint 是指用戶在網頁上實際可見和可交互的區域,通常指的是瀏覽器視窗或移動設備的屏幕尺寸。 width:100vw;height:100vh rem (root em)是相對 ...


基礎與面試題:viewpoint 與 rem、百分比高度、px

一、定義

​ 一個表總結:

名稱 定義 使用示例
viewpoint 是指用戶在網頁上實際可見和可交互的區域,通常指的是瀏覽器視窗或移動設備的屏幕尺寸。 width:100vw;height:100vh
rem (root em)是相對於根元素(通常是 <html> 元素)的字體大小來計算的單位。 width:100rem;height:100rem
百分比 是相對於父元素的尺寸來計算所占大小 width:100%;height:100%
px 像素 width:100px;height:100px

知識點補充:

1、viewpoint 怎麼來的?

註意:若要使用 viewpoint 必須在 <html><head> 中做如下聲明:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • width=device-width:使 viewport 寬度等於設備的屏幕寬度,確保網頁在移動設備上可以完全顯示。
  • initial-scale:設置初始縮放級別,通常設置為 1,以避免頁面自動縮放。
  • minimum-scalemaximum-scale:指定允許用戶進行縮放的最小和最大比例。
  • user-scalable:控制用戶是否可以手動縮放頁面。

​ “viewport” 是一個非常重要的概念,特別是在移動端開發中更為突出。

​ 在傳統的桌面瀏覽器中,viewport 的大小通常是瀏覽器視窗的大小,而在移動設備上,情況會更加複雜,因為移動設備的屏幕尺寸各異,且用戶可以縮放頁面。為了使網頁在移動設備上有良好的可視性和可交互性,開發者需要控制和優化 viewport。

​ Viewport 的計算方式可以用以下公式表示:(以 vw 為例子,vh 同理)

viewport width = device width / device pixel ratio

​ 其中,viewport width 表示視口的寬度,device width 表示設備的物理像素寬度,device pixel ratio 表示設備像素比。

​ 通過js進行計算示例:

// 獲取視口寬度
const viewportWidth = window.innerWidth;

// 獲取屏幕像素比
const pixelRatio = window.devicePixelRatio;

// 計算得到視點的大小
const viewportSize = viewportWidth / pixelRatio;

// 輸出視口寬度
console.log("視點:" + viewportSize); // 這就是100vw的大小了,相當於正好屏幕的寬度

2、rem 單位大小是怎麼計算的

​ rem 是指相對於根元素(<html> 元素)的字體大小的單位,它的計算方式是基於設備視口寬度和根元素字體大小的比例關係。

​ 為了適應不同設備的視口大小和解析度,我們通常使用相對字體大小作為網頁設計的基礎單位。和相對於父級元素大小的 em 單位不同,rem 單位只相對於根元素的字體大小,因此可以確保網頁佈局在不同的設備和屏幕尺寸下一致。

​ 假設我們將根元素的字體大小設置為 16px,則 1rem 就等於 16px。例如,如果我們使用 font-size: 1.5rem 來設置某個元素的字體大小,則該元素的字體大小就等於 1.5 * 16px = 24px

​ 當根據構建響應式的設計時,rem 單位也可以用於設置其他的樣式屬性,例如 padding、 margin、width 等。

​ 為了確保使用 rem 單位時計算結果正確,我們需要考慮視口寬度和根元素字體大小的關係。一般來說,我們會將根元素字體大小設置為一個比較合適的基準大小,例如 16px、14px 等。然後,根據視口寬度的變化,調整字體大小和佈局的比例關係。

具體計算方式如下:

rem = px / 基準字型大小

其中,px 表示元素屬性的像素值,基準字型大小表示根元素的字體大小(單位為 px)。通過這個公式,我們可以將像素單位轉換成 rem 單位,並保證網頁在不同設備下的字體和佈局一致。

需要註意的是:使用 rem 單位時,不同瀏覽器對於字體大小的計算方式可能會存在差異。因此,在實際開發中,你可能需要使用 @media 媒體查詢或 JS 腳本來動態調整根元素的字體大小和 rem 單位的計算方式。

​ 使用 js 獲取根節點的字體大小:

// 獲取根元素
const rootElement = document.documentElement;

// 獲取計算後的樣式
const computedStyle = window.getComputedStyle(rootElement);

// 獲取根元素上的字體大小
const fontSize = computedStyle.getPropertyValue('font-size');

// 輸出字體大小
console.log("字體大小:" + fontSize); // 一般而言是 16px, 也就是 1rem

二、viewpoint 與 rem 的差異

  1. 單位類型:
    • rem(root em)是相對於根元素(通常是 <html> 元素)的字體大小來計算的單位。
    • viewport 是指用戶在網頁上實際可見和可交互的區域,通常指的是瀏覽器視窗或移動設備的屏幕尺寸。
  2. 適用範圍:
    • rem 主要用於設置字體大小和元素尺寸,它是相對於根元素的字體大小來計算的,可以用於實現相對於根元素的等比縮放。
    • viewport 主要用於控制網頁在移動設備上的顯示效果,通過 <meta> 標簽設置 viewport,以確保頁面在不同設備上以正確的比例顯示,並控制用戶是否可以縮放頁面。
  3. 計算方式:
    • rem 的計算是相對於根元素的字體大小,例如,1rem 等於根元素的字體大小。
    • viewport 的計算是相對於視口的大小,例如,1vw 等於視口寬度的 1%。
  4. 應用場景:
    • rem 通常用於實現相對於根元素的等比縮放,特別適用於響應式設計。
    • viewport 用於控制網頁在移動設備上的顯示效果,確保頁面在不同設備上以正確的比例顯示,並控制用戶是否可以縮放頁面

三、viewpoint 與 百分比 的差異

  1. 基準不同:
    • 百分比是相對於父元素的尺寸來計算的,而vw/vh是相對於視口的尺寸來計算的。
    • 如果父元素的尺寸與視口尺寸相同,那麼百分比和vw/vh可能會產生相似的效果。但如果父元素的尺寸與視口尺寸不同,那麼它們就會產生不同的效果。
  2. 響應式性:
    • 使用vw/vh更具有響應式的特性,因為它們是相對於視口的大小來計算的,可以隨著視口的變化而變化,從而更好地適應不同設備的屏幕尺寸。
    • 百分比相對於父元素的大小計算,如果父元素的大小發生變化,那麼百分比計算出的大小也會相應變化,但它不直接與視口大小相關聯。
  3. 用途不同:
    • 在某些情況下,使用百分比可能更適合,特別是當元素的尺寸應該相對於其父元素而不是整個視口時。
    • 使用vw/vh通常更適合於實現基於視口大小的佈局和設計,尤其是在移動設備上。

四、像素(px)

一塊屏幕的能顯示的部分都是由一個一個的像素點構成的。在網頁和UI中,這也是不可再細分的單位,也是最小的單位。

上述 viewpoint、 rem、em、百分比 其實本質上都是要確定需要在屏幕上使用多少個寬度像素作為一個基準單位來適應不同屏幕大小,以正常顯示網頁內容。

​ 像素是圖像顯示和數字圖形處理中的基本單位,用於描述圖像的解析度和清晰度。一個像素代表圖像中的一個最小的、不可分割的點或顏色單元,是構成數字圖像的基本單元之一。

​ 在電腦圖形學中,像素通常表示為一個有限的方塊或矩形區域,每個像素可以包含一個顏色值,用於描述圖像在該點的色調、亮度和飽和度等信息。根據顏色深度的不同,每個像素可以包含不同位數的顏色信息,例如 8 位顏色(256 色)、24 位真彩色(約 1677 萬色)等。

​ 像素密度指的是每英寸包含的像素數量,通常表示為每英寸的像素數(PPI,Pixels Per Inch)。像素密度越高,圖像顯示的細節和清晰度就會更高,比如高解析度的 Retina 顯示屏就有更高的像素密度。

在不同的設備和顯示器中,像素的大小和顯示方式可能有所不同。例如,傳統液晶顯示器中的像素是一個固定大小的點,而在 Retina 顯示屏等高密度顯示器中,一個邏輯像素可能會對應多個物理像素,以提供更高清晰度的顯示效果。

​ 總的來說,像素是數字圖像中描述圖形、圖像和文本的基本單元,它在電腦視覺、數字圖形處理、網頁設計等領域都有著重要的作用。我們通過調整像素的顏色、位置和密度等屬性,可以創造出各種豐富多彩的視覺效果。

五、使用方法推薦

本文並沒有對 em 做重點講解,但我考慮再三,還是把它加上,方便自己,也方便大家。

不同的單位在網頁設計和佈局中有各自的優勢和適用場景,下麵簡單介紹一下它們的特點和使用時機:

  1. viewport 單位(vw、vh、vmin、vmax):
    • 最適用時機:viewport 單位是相對於視口大小的單位,適用於創建響應式佈局和元素尺寸的動態調整。可以使用 vw、vh 來設置視口寬度和高度的百分比,vmin 和 vmax 可以根據視口的最小或最大維度來設置大小。
  2. rem 單位:
    • 最適用時機:rem 單位是相對於根元素(<html>)字體大小的單位,適用於字體大小、間距和佈局的一致性調整。通過設置根元素的字體大小,可以靈活地調整整個頁面的佈局比例。
  3. em 單位:
    • 最適用時機:em 單位是相對於父元素字體大小的單位,適用於定義相對於父元素的尺寸比例。可以用於嵌套元素樣式的簡化和響應式設計中的相對大小設置。
  4. 百分比單位(%):
    • 最適用時機:百分比單位可以相對於父元素的大小進行設置,適用於創建相對於父元素的大小比例調整,實現響應式設計以及佈局的彈性調整。
  5. 像素單位(px):
    • 最適用時機:像素單位是絕對長度單位,適用於固定尺寸的元素設置,如邊框、陰影等。在某些情況下,使用像素單位可以確保元素大小的準確性和穩定性。

根據以上介紹,在實際 web 開發中,我們可以根據佈局的需求和設計的靈活性來選擇合適的單位。通常情況下,我們會結合使用不同單位來實現網頁佈局的靈活性和響應式設計的需求。在具體實踐中,根據設計的要求和佈局的需要,選擇合適的單位來輔助網頁設計和開發。

補充:(基準字型大小)

基準字型大小的確定並沒有一個固定的規定,它可以根據具體的設計需求和開發者的偏好來進行選擇。一般來說,基準字型大小可以根據以下幾個方面來確定:

  1. 設計師的建議:設計師通常會提供一些基準字型大小的建議,以適應設計稿的比例和整體效果。你可以與設計團隊或者設計師討論,並根據他們的建議來設定基準字型大小。

  2. 瀏覽器的預設字型大小:瀏覽器預設字型大小一般設置為 16px,因此在沒有顯式設置基準字型大小的情況下,可以將其作為預設的基準字型大小。

  3. 用戶體驗和可讀性:考慮到網頁的可讀性和用戶體驗,合適的基準字型大小應該在保持字體清晰度的同時,不會過大或過小,以免影響用戶的閱讀和瀏覽體驗。通常建議基準字型大小在 14px 到 18px 之間。

  4. 響應式佈局考慮因素:如果你的網頁設計是響應式的,需要適應不同的設備和屏幕尺寸,可以根據不同的媒體查詢設置不同的基準字型大小,以滿足不同屏幕大小下的顯示需求。

當你確定了基準字型大小後,可以將其應用於根元素 <html> 的樣式中,例如:

html {
  font-size: 16px; /* 基準字型大小 */
}

然後,使用 rem 單位來設置其他元素的字體大小、間距等屬性,像這樣:

h1 {
  font-size: 2rem; /* 相當於 32px(2 * 16px) */
  margin-bottom: 1.5rem; /* 相當於 24px(1.5 * 16px) */
}

值得註意的是,為了確保不同設備上的一致性,通常會使用媒體查詢或 JavaScript 等技術根據設備的寬度動態調整基準字型大小。這樣可以確保在不同設備上字體大小和佈局的比例關係相對一致。例如,可以通過媒體查詢來設置不同視口寬度下的基準字型大小,以適應不同屏幕大小。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • innodb_log_file_size 和 innodb_buffer_pool_size 是 MySQL 資料庫中 InnoDB 存儲引擎的兩個重要配置參數。它們對資料庫的性能和可靠性有著顯著的影響。 1. innodb_log_file_size innodb_log_file_size 參數 ...
  • 前言: 在廣州這座城市下著小雨的晚上,我正在廚房洗著碗,突然手機有來電,脫下手套,一看是來自阿裡雲的告警電話。打開飛書查看告警內容,發現某個業務的RDS只讀實例CPU飈到100%,下意識覺得是不是有慢查詢導致,想著不會有啥問題,上去kill慢查就好了,結果發現是大問題....一、發現問題 2024年 ...
  • 我司使用Apache DolphinScheduler作為調度框架很久了,感興趣的小伙伴可以看看這些乾貨文章: 因為之前監控到會出現重覆的調度的問題,所以此文記錄排查重覆調度問題的全過程,希望對社區其他的小伙伴能夠起到拋磚引玉的作用! 註:本文使用的DolphinScheduler 3.1.1的版本 ...
  • 本文分享自華為雲社區《【防過載檢查項】》,作者: 譡里個檔。 1. GUC參數檢查 目的:針對不同版本建議設定不同的參數值,當前先檢查出來,後續diagnosis會給出建議值 SELECT split_part((substring(version() from '\((.*)\)')), ' ', ...
  • 作者:盧文雙 資深資料庫內核研發 本文首發於 2024-03-06 20:52:24 https://dbkernel.com 前言 計算下推是資料庫優化器優化查詢性能的一種常見手段,早期的資料庫系統提及的計算下推一般是指謂詞下推,其理論源自關係代數理論。2000 年以後,隨著 Oracle RAC ...
  • 背景 業務端遇到報錯為"Deadlock found when trying to get lock; try restarting transaction"則表明有死鎖發生 名稱 配置 資料庫版本 GreatSQL 8.0.26 隔離級別 Read-Commited innodb status 日 ...
  • 原文: Kotlin 協程基礎使用學習-Stars-One的雜貨小窩 本篇閱讀可能需要以下知識,否則可能閱讀會有些困難 客戶端開發基礎(Android開發或JavaFx開發) Java多線程基礎 kotlin基礎 本文儘量以使用為主,以代碼為輔講解,不提及過深協程底層代碼邏輯,僅做一個基礎入門來快速 ...
  • Android 輔助功能 -搶紅包(三) 本篇文章繼續講述輔助功能. 主要通過監聽通知欄紅包消息,來跳轉聊天頁面,並自動回覆對方"謝謝". 上篇文章我們講述了監聽notification, 跳轉聊天界面. 具體可查看: Android 輔助功能 -搶紅包(二) 1: 使用monitor抓取id. 打 ...
一周排行
    -Advertisement-
    Play Games
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...