單元在測量和建造房屋、橋梁或塔等方面起著重要作用，建網(wǎng)站也不例外。在Web上有許多測量方法，特別是在CSS中，即像素、EM和百分比。

在這篇文章中，我們將通過這些單位來進一步了解這些測量單位。

PX

像素是一個固定的單位度量，也是屏幕度量中最小的單位，但是不要將它與定義屏幕分辨率的像素混淆。CSS中的像素與屏幕分辨率無關(guān)。

當(dāng)我們嘗試在屏幕分辨率為1024px * 480px的平板電腦上瀏覽一個寬度為1024px的網(wǎng)頁時，這個網(wǎng)頁將不適合屏幕。

我曾經(jīng)經(jīng)歷過這個問題，并發(fā)現(xiàn)CSS中的像素實際上不是一個線性單位——它實際上是一個徑向測量。

基本上，CSS中的像素度量的是顯示區(qū)域的長度，而不是屏幕分辨率，所以1024px的屏幕分辨率并不意味著屏幕的長度也是1024px。

更多的像素

我不是這個問題的技術(shù)專家，但如果你知道三角，并想了解更多，看看下面Sean B. Plamer的解釋:CSS px是一個角度測量。

css-units

查找顯示區(qū)域

那么，我們?nèi)绾握业皆O(shè)備的實際顯示區(qū)域呢?幸運的是，有一個方便的特殊計算器可以粗略估計顯示區(qū)域的像素，CM到PX的格式。

我們只需要以cm和PPI(點每英寸)/ DPI(點每英寸)為單位的設(shè)備長度，您可以從設(shè)備盒中獲得這些信息。這樣看來，我使用的藥片只有953pxin長度。

css-units

推薦閱讀:像素識別危機

Photoshop中的像素字體大小

在Photoshop中工作時，我們會發(fā)現(xiàn)字體大小默認設(shè)置為Pt(點)。Pt單位是理想的打印風(fēng)格。

當(dāng)我們將其翻譯成Web文檔時，為了不將其與px混淆，我們可以從下面的菜單更改單位:編輯>首選項>單位和標尺。

在那里，你有一個窗口選項，如下面的截圖所示。選擇“pixels”作為類型單位。

css-units

px是字體大小。

css-units

新興市場

EM是一種相對測量。在CSS中，EM指的是來自設(shè)備或文檔本身的默認字體大小的乘法，這就是為什么我個人把EM稱為強調(diào)，但當(dāng)然不要相信我的話。

這里有一個例子;假設(shè)在文檔中，字體大小被指定為16px。1em等于16px 2em等于32px，以此類推。

盡管EM傳統(tǒng)上用于字體大小調(diào)整，而且實際上它是瀏覽器樣式中用于測量字體大小的標準單位，但我們也可以使用EM來定義元素的長度。

當(dāng)使用EM單元工作時，唯一的約束是它不是很直觀，但有兩種實際的方法我們可以處理這個。首先，我們可以用這個計算器，PX到EM;這是一個我經(jīng)常使用的計算器。

css-units

另一種方法是將文檔的base像素設(shè)置為10px，這樣計算起來更容易;例如，將15px設(shè)置為1.5em。好吧，我希望你能通過這個例子得到基本的思想。

百分比

使用百分比更直接，它相對于父長度進行度量。當(dāng)父寬度是800px，那么50%將變成400px。近年來，響應(yīng)式設(shè)計開始成為web設(shè)計的標準，百分比單位被更頻繁地采用。

好的，讓我們看一下下面的例子;下面的代碼定義了寬度為60%的.container和.main類選擇器，但是這些類引用不同的父類，因此它們生成不同的長度。

container將取60%的瀏覽器視口寬度，而。main將取。container寬度作為它的直接父元素。

css-units

由于百分比也是一個相對單位，所以它也有類似EM單位的約束。不清楚15px等于500px的百分比是多少?在很多情況下，當(dāng)我們將px單元從設(shè)計階段轉(zhuǎn)換到web文檔時，通常會發(fā)生這種情況。

有兩種方法可以解決這個問題，要么使用傳統(tǒng)的計算器，要么如果您習(xí)慣使用CSS預(yù)處理器，您可以使用Sass中的百分比()函數(shù)。

最終的想法

有很多關(guān)于在網(wǎng)頁設(shè)計中使用單元的最佳實踐的討論。但理想情況下，PX單元應(yīng)該在屬性需要精確時使用，例如邊框半徑和框陰影水平或垂直偏移量，而對于EM單元，W3C建議更好地用于字體大小調(diào)整。百分比是用于響應(yīng)式布局的理想單位。