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

在這篇文章中，我們將通過(guò)這些單位來(lái)進(jìn)一步了解這些測(cè)量單位。

PX

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

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

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

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

更多的像素

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

css-units

查找顯示區(qū)域

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

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

css-units

推薦閱讀:像素識(shí)別危機(jī)

Photoshop中的像素字體大小

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

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

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

css-units

px是字體大小。

css-units

新興市場(chǎng)

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

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

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

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

css-units

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

百分比

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

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

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

css-units

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

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

最終的想法

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