css能用像素單位嗎

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

本教學操作環境：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像素(黑色邊框)開始被拉伸，此時1個CSS像素大於1個螢幕像素

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

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

（學習影片分享：css影片教學、html影片教學）

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