css能不能用像素單位

本文小編為大家詳細(xì)介紹“css能不能用像素單位”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css能不能用像素單位”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

css中能用像素單位；像素單位指的是相對于顯示器屏幕分辨率而言的單位，是一種相對長度單位，css中使用“px”作為像素單位，用于調(diào)整元素的大小或者間距；這種像素長度和在顯示器上看到的文字屏幕像素?zé)o關(guān)。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

css能用像素單位嗎

css能用像素單位

px單位名稱為像素，像素（px）是相對于顯示器屏幕分辨率而言的，而這種像素長度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。

而且在特定設(shè)備上總是一個(gè)近似值（原則是盡量接近參考像素）。

px實(shí)際上是一個(gè)按角度度量的單位。

像素是長度單位的一種，它告訴瀏覽器如何調(diào)整項(xiàng)目的大小或間距。

px像素（CSS像素）

px是相對長度。

CSS 像素（CSS Pixel）:

又稱為虛擬像素、設(shè)備獨(dú)立像素或邏輯像素，也可以理解為直覺像素。CSS 像素是 Web 編程的概念，指的是 CSS 樣式代碼中使用的邏輯像素。比如 iPhone 6 的 CSS 像素?cái)?shù)為 375 x 667px。

虛擬像素，可以理解為“直覺”像素，CSS和JS使用的抽象單位，瀏覽器內(nèi)的一切長度都是以CSS像素為單位的，CSS像素的單位是px。

在CSS規(guī)范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px是一個(gè)相對單位，相對的是設(shè)備像素(device pixel)。

在同樣一個(gè)設(shè)備上，每1個(gè)CSS像素所代表的物理像素是可以變化的(即CSS像素的第一方面的相對性);

在不同的設(shè)備之間，每1個(gè)CSS像素所代表的物理像素是可以變化的(即CSS像素的第二方面的相對性);

px實(shí)際是pixel（像素）的縮寫，它是圖像顯示的基本單元，既不是一個(gè)確定的物理量，也不是一個(gè)點(diǎn)或者小方塊，而是一個(gè)抽象概念。所以在談?wù)撓袼貢r(shí)一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！

舉個(gè)例子來理解css像素的相對性

假設(shè)我們用PC瀏覽器打開一個(gè)頁面，瀏覽器此時(shí)的寬度為800px，頁面上同時(shí)有一個(gè)400px寬的塊級元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁面的一半。

但如果我們把頁面放大（通過“Ctrl鍵”加上“+號鍵”），放大為200%，也就是原來的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。

吊詭的是此時(shí)我們既沒有調(diào)整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因?yàn)槲覀儼袰SS像素放大為了原來的兩倍。

CSS像素與屏幕像素1：1同樣大小時(shí)：

CSS像素(黑色邊框)開始被拉伸，此時(shí)1個(gè)CSS像素大于1個(gè)屏幕像素

也就是說默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度的，但是瀏覽器的放大操作讓一個(gè)CSS像素等于了兩個(gè)設(shè)備像素寬度。在后面你會(huì)看到更復(fù)雜的情況，在高PPI的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。

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

讀到這里，這篇“css能不能用像素單位”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。