px? pt? dp? em？rem？vw？vh？ch？ex？這些單位你了解嗎？

前言

一、常見單位

?1、px單位

2、dp單位?

3、pt單位

4、百分比%

5、em單位

6、rem單位

7、vw和vh單位

8、ch、ex單位

二、如何換算

1、?pt和px換算

2、px和dp換算

3、em和px換算

4、rem和px換算

三、總結

前言

前端開發在日常設計中除了最常用的 px 以外，還會經常看到 dp、pt、em、rem 等單位，那么這些單位都有什么區別呢？今天我給大家歸納總結一下，大家記得收藏以備之后工作需要哦～。???????

一、常見單位

?1、px單位

px像素，是網頁設計和移動應用設計中最常用的單位。表示屏幕上的一個點，根據顯示設備具有固定的大小，不受其他因素影響。常用于確定文本、圖像和元素的大小和位置。

2、dp單位?

dp（也稱為?dip）：設備獨立像素，是一個相對的尺寸單位，表示屏幕上的一個點。與?px?不同，dp?能夠根據設備的像素密度進行自適應縮放，從而在不同設備上保持一致的大小。

3、pt單位

pt是磅值，常用于印刷品設計中。表示打印出來的一個點，和像素不同，它不是固定的，而是基于印刷設備的分辨率和輸出質量來計算的。因此，使用磅值可以確保在不同設備上輸出的印刷品大小一致。?

4、百分比%

百分比在前端開發中是一個動態單位，永遠以當前元素的父元素作為參考進行計算。

元素尺寸百分比

我們可以創建一個容器，在容器中包含網頁的主要內容。我們使用百分比來設置容器的寬度和高度，使其能夠根據用戶的屏幕尺寸自動調整大小。例如：

.container {width: 80%;height: 50%;
}

在這個例子中，容器的寬度和高度都設置為百分比，分別為80%和50%。這意味著無論用戶的屏幕尺寸如何，容器都會自動調整大小，并且在任何設備上都能夠很好地顯示。

?元素位置百分比

通過使用百分比，我們還可以設置元素相對于其容器的位置。這對于設計一個具有居中或者自適應特點的網站非常有用。例如：

.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

在這個例子中，我們使用百分比來設置元素的位置，使其在其容器中居中顯示。我們首先使用position:absolute將元素定位為絕對定位，然后使用top:50%和left:50%將其位置相對于其容器居中定位。最后，我們使用transform:translate(-50%,-50%)將元素的位置進行微調，使其居中。

?顏色和背景百分比

h1 {color: rgba(100%,0%,0%,0.5);background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}

在這個例子中，我們使用百分比來設置文本和背景的透明度。具體來說，我們將文本的顏色設置為紅色，并將其透明度設置為50%。而背景則使用linear-gradient來設置一個紅色漸變背景，同時將透明度從60%到0%進行漸變。這樣，我們就可以創建出一個半透明的文本和背景效果。?

5、em單位

em是相對于當前元素的字體大小。通常用于網頁設計中設置文本的大小，具有相對的特性，可以根據父元素的字體大小進行縮放。?

<style>div {font-size: 18px;  /* 設置父元素的字體大小 */}span:nth-child(1) {font-size: 1em;   /* 1em相當于1*18px=18px */}span:nth-child(2) {font-size: 18px;}
</style>
<body><div><span>em單位驗證</span><br><span>px像素單位驗證</span></div>
</body>

上面的代碼兩個span標簽里面的文字是一樣的，雖然第一個span標簽設置的字體為1em，第二個span標簽設置的字體大小為18px，但是最后得到的效果是一模一樣的。這是因為span的父元素div設置的字體大小為18px，所以1em=18px。接驗證了em單位是相對于父元素而言的。

em特點：

em的值并不是固定的；
em會繼承父級元素的字體大小。

6、rem單位

rem是相對于根元素的字體大小。也是用于網頁設計中設置文本的大小，但相對于?em，它是相對于根元素的字體大小進行縮放，因此更加穩定和一致。比如我定義：

html{ font-size:14px}

那么設為2rem的話就相當于 2*14px。也就是?

.box{font-size:2rem;/*font-size:28px;*//*2*14px/
}

使用rem為元素設定字體大小時，是相對大小，但相對的只是HTML根元素。因此我們一般使用rem作為移動端的主流單位，可以很好的來控制整個頁面的元素大小比例。

優點：

這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

缺點：

目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

7、vw和vh單位

vw?相對于視口的寬度。視口被均分為100單位。

h1 {font-size: 8vw;
}

再舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px

vh?相對于視口的寬度。視口被均分為100單位

h1 {font-size: 8vh;
}

再舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px

總結：

?vw：1vw等于視口寬度的1%。
?vh：1vh等于視口高度的1%。

?缺點：兼容性很差，不推薦使用，目前用的很舒服的還是px和rem。

8、ch、ex單位

ch單位

ch 單位通常被定義為數字0的寬度。你可以在Eric Meyers的博客里找到關于它的一些有意思的討論，例如將一個等寬字體的字母”N”的寬度設置為40ch，那么在另一種類型的字體里它卻可以包含40個字母。常用于設置固定寬度的元素，如表格、代碼塊等，可以保證每個字符的寬度一致。

使用場景：

用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。

ex單位

ex 定義為當前字體的小寫x字母的高度或者 1/2 的 1em。很多時候，它是字體的中間標志。

使用場景：

有很多用途，大部分用于版式的微調。比方說，sup 元素（上角文字標），可以通過position:relative;bottom: 1ex;實現。

不同點：

這兩是基于字體的度量單位，依賴于設定的字體。

二、如何換算

1、?pt和px換算

公式一： 1pt= (DPI / 72) px

當photoshop中新建畫布的分辨率為72ppi( 即 72dpi時 )， 1pt=1px; 當新建畫布分辨率為72*2=144ppi時，1pt=2px

2、px和dp換算

dp為安卓開發時的長度單位，根據不同的屏幕分辨率，與px有不同的對應關系。

安卓端屏幕大小各不相同，根據其像素密度，分為以下幾種規格：

1dp定義為屏幕密度值為160ppi時的1px，即，在mdpi時，1dp = 1px。以mdpi為標準，這些屏幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即，在xhdpi的密度下，1dp=2px;在hdpi情況下，1dp=1.5px。其他類推。

1dp=(屏幕ppi/ 160)px

以WVGA屏為例，該屏幕為480px*800px，按3.8寸屏算，點密度 √ (480^2 + 800^2) / 3.8 = 245，約等于240，對應于hdpi屏幕，所以該屏幕1dp=1.5px

3、em和px換算

任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。