首頁 > web前端 > 前端問答 > css能用像素單位嗎

css能用像素單位嗎

WBOY
發布: 2022-06-17 11:11:36
原創
1915 人瀏覽過

css中能用像素單位;像素單位指的是相對於顯示器螢幕解析度而言的單位,是一種相對長度單位,css中使用「px」作為像素單位,用於調整元素的大小或間距;這種像素長度和在顯示器上看到的文字螢幕像素無關。

css能用像素單位嗎

本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css能用像素單位嗎

css能用像素單位

px單位名稱為像素,像素(px)是相對於顯示器螢幕解析度而言的,而這種像素長度和你在顯示器上看到的文字螢幕像素無關。

而且在特定裝置上總是一個近似值(原則是盡量接近參考像素)。

px其實是一個以角度測量的單位。

像素是長度單位的一種,它告訴瀏覽器如何調整項目的大小或間距。

px像素(CSS像素)

#px是相對長度。

CSS 像素(CSS Pixel):

又稱為虛擬像素、裝置獨立像素或邏輯像素,也可以理解為直覺像素。 CSS 像素是 Web 程式設計的概念,指的是 CSS 樣式程式碼中使用的邏輯像素。例如 iPhone 6 的 CSS 像素數為 375 x 667px。

虛擬像素,可以理解為「直覺」像素,CSS和JS所使用的抽象單位,瀏覽器內的一切長度都是以CSS像素為單位的,CSS像素的單位是px。

在CSS規範中,長度單位可以分為兩類,絕對(absolute)單位以及相對(relative)單位。 px是一個相對單位,相對的是裝置像素(device pixel)。

在同樣一個裝置上,每1個CSS像素所代表的物理像素是可以變化的(即CSS像素的第一方面的相對性);

在不同的裝置之間,每1個CSS像素所代表的物理像素是可以變化的(即CSS像素的第二方面的相對性);

px實際上是pixel(像素)的縮寫,它是圖像顯示的基本單元,既不是確定的物理量,也不是一個點或小方塊,而是抽象概念。所以在談論像素時一定要清楚它的上下文!一定要清楚它的上下文!一定要清楚它的上下文!

舉例來理解css像素的相對性

假設我們用PC瀏覽器開啟一個頁面,瀏覽器此時的寬度為800px,頁面同時有一個400px寬的區塊級元素容器。很明顯此時塊狀容器應該佔頁面的一半。

但如果我們把頁面放大(透過「Ctrl鍵」加上「 號鍵」),放大為200%,也就是原來的兩倍。此時塊狀容器則橫向佔滿了整個瀏覽器。

吊詭的是此時我們既沒有調整瀏覽器視窗大小,也沒有改變塊狀元素的css寬度,但是它看上去卻變大了一倍——這是因為我們把CSS像素放大為了原來的兩倍。

CSS像素與螢幕像素1:1同樣大小時:

css能用像素單位嗎

#CSS像素(黑色邊框)開始被拉伸,此時1個CSS像素大於1個螢幕像素

css能用像素單位嗎

也就是說預設情況下一個CSS像素應該是等於一個物理像素的寬度的,但是瀏覽器的放大操作讓一個CSS像素等於了兩個設備像素寬度。在後面你會看到更複雜的情況,在高PPI的裝置上,CSS像素甚至在預設狀態下就相當於多個物理像素的尺寸。

從上面的例子可以看出,CSS像素從來都只是一個相對值。

(學習影片分享:css影片教學html影片教學

以上是css能用像素單位嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板