css中px是什麼意思

青灯夜游
發布: 2021-07-05 15:40:41
原創
4037 人瀏覽過

在css中,px全名為pixel,中文意思是“像素”,指的是CSS樣式程式碼中使用的邏輯像素;它是一種相對長度單位,是相對於顯示器螢幕解析度而言的。

css中px是什麼意思

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

px像素(CSS像素)

#px是pixel的縮寫,是像素單位,也是為影像顯示的基本單位。在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中px是什麼意思

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

css中px是什麼意思

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

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

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

以上是css中px是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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