在css中,px全名為pixel,中文意思是“像素”,指的是CSS樣式程式碼中使用的邏輯像素;它是一種相對長度單位,是相對於顯示器螢幕解析度而言的。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
#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像素(黑色邊框)開始被拉伸,此時1個CSS像素大於1個螢幕像素
也就是說預設情況下一個CSS像素應該是等於一個物理像素的寬度的,但是瀏覽器的放大操作讓一個CSS像素等於了兩個設備像素寬度。在後面你會看到更複雜的情況,在高PPI的裝置上,CSS像素甚至在預設狀態下就相當於多個物理像素的尺寸。
從上面的例子可以看出,CSS像素從來都只是一個相對值。
(學習影片分享:css影片教學)
以上是css中px是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!