一文搞懂CSS中的字體單位大小(px,em,rem...)

時間 2019-11-29

標籤一文 css 字體單位大小 rem 欄目 CSS 简体版

原文原文鏈接

前言

在學習的過程當中,發現CSS有不少能夠描述單位的尺寸。好比px,em,rem,vw等等。平時也沒有深究，一來是沒時間，二來是在我學習清單中優先級太低。一直想完全弄明白，一直耽擱到如今。如今花上一點時間來整理一下，完全弄懂它。css

CSS長度單位

絕對長度單位。絕對長度單位表示爲一個固定的值，不會改變。不利於頁面渲染。
- in,英寸
- cm, 裏面
- mm, 毫米
- pt
- pc
相對長度單位。其長度單位會隨着它的參考值的變化而變化。
- px,像素
- em,元素的字體高度
- %,百分比
- rem,根元素的font-size
- vm,視窗寬度，1vw=視窗寬度的1%
- vh,視窗高度，1vh=視窗高度的1%

物理像素(設備像素)

好比有一個圖片，細分，最小單位就是像素。也就是說，圖片由許多的像素構成。像素是小方塊，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。html

一個設備生產出來，它們的像素就已經肯定了。iPhone5的分辨率是640x1136px,表明屏幕由640行，1136列像素小方塊組成。

爲了理解像素和避免與CSS像素混淆，
能夠將物理像素當作物理小方塊。
好比iPhone5的像素是640X1136px,能夠當作640*1136個小方塊。
複製代碼

分辨率

也叫作解析度，解像度。能夠從顯示分辨率與圖像分辨率兩個方向來分類。前端

屏幕分辨率。是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少，即顯示器能夠能夠顯示的小方塊有多少個。
- 顯示器的可顯示的小方塊越多，畫面就越精細，一樣的屏幕區域內能顯示的信息也越多
- 能夠把整個圖像想象成是一個大型的棋盤，而分辨率的表示方式就是全部經線和緯線交叉點的數目。棋盤的小方塊越多，能夠放的棋子就越多。
- 顯示分辨率必定的狀況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時，顯示分辨率越高圖像越清晰。(小方塊同樣多的狀況下，顯示屏越小越清晰；屏幕大小同樣大的時候，小方塊越多圖形越清晰)

CSS像素px

CSS像素的單位也叫作px。它是圖像顯示的基本單元，既不是一個肯定的物理量，也不是一個點或者小方塊，而是一個抽象概念。因此在談論像素時必定要清楚它的上下文！css3

爲了保證閱讀體驗一致，CSS能夠自動在不一樣設備之間能夠調節。即一份代碼能夠在不一樣的大小的設備之間顯示，而且能夠保證閱讀體驗一致。
默認狀況下一個CSS像素應該是等於一個物理像素的寬度。
可是在高PPI的設備上，CSS像素甚至在默認狀態下就至關於多個物理像素的尺寸。好比iPhone的屏幕對比通常的手機屏幕會看起來更精細清晰一些。
在瀏覽器上經過ctrl +/-能夠擴大縮小屏幕，其實就是屏幕分辯率的調低/調高。ctrl +屏幕放大，分辨率下降。
iPhone6,7,8都是兩倍屏手機，即一個CSS像素等於2物理像素。iPhone6Plus等是三倍屏手機，一個CSS像素等於3物理像素。
以iPhone6爲例，設計稿給出一個圖片寬高爲40*40。在實際開發中要除以2，寬高要寫成20x20。由於iPhone6是兩倍屏手機。

em

em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸,瀏覽器字體默認爲16px。git

因此，1em = 16px。默認狀況下。

如何高效使用em呢

body裏聲明font-size:62.5%。即全局聲明1em = 16px * 62.5% = 10px
以後能夠把em當作px使用。固然此時，1em = 10px
若是在父容器裏說明了font-size:20px,那麼在子容器裏的1em就等於20px。

rem

rem單位是相對於字體大小的html元素，也稱爲根元素。github

html {
  font-size: 10px; /* 不建議設置 font-size: 62.5%; 在 IE 9-11 上有誤差，具體表現爲 1rem = 9.93px。 */
}

.sqaure {
  width: 5rem;  /* 50px */
  height: 5rem; /* 50px */
}
複製代碼

em與rem

rem是相對於根元素（html）的字體大小，而em是相對於其父元素的字體大小。
em最多取到小數點的後三位

<style>
  html{ font-size: 20px; }
  body{ 
    font-size: 1.4rem;  /* 1rem = 28px */
    padding: 0.7rem;  /* 0.7rem = 14px */
  } 
  div{
    padding: 1em;  /* 1em = 28px */
  }
  span{
    font-size:1rem;  /* 1rem = 20px */
    padding: 0.9em;  /* 1em = 18px */
  }
</style>

<html>
  <body>
    <div>   
      <span></span>  
    </div>
  </body>
</html>
複製代碼

上面的例子中，發現了一個有意思的狀況。em 會層層繼承父元素的字體大小，很容易形成字體大小的混亂。因此之後用rem會更好。小程序

rpx

rpx 是微信小程序解決自適應屏幕尺寸的尺寸單位。微信小程序規定屏幕的寬度爲750rpx。微信小程序

不管是在iPhone6上面仍是其餘機型上面都是750rpx的屏幕寬度，拿iPhone6來說，屏幕寬度爲375px，把它分爲750rpx後， 1rpx = 0.5px = 1物理像素。瀏覽器

vw 和 vh

vw,視窗寬度，1vw=視窗寬度的1%
vh,視窗高度，1vh=視窗高度的1%
若是瀏覽器的高是900px,1vh求得的值爲9px。同理，若是顯示窗口寬度爲750px,1vw求得的值爲7.5px。

vmin 和 vmax

vmin和vmax是相對於視口的高度和寬度二者之間的最小值或最大值。
瀏覽器的高爲1100px、寬爲700px，那麼1vmin就是7px，1vmax就是11px
瀏覽器的高爲800px，寬爲1080px，那麼1vmin也是8px，1vmax也是10.8px
vmin取寬度高度二者更小者/100
vmax取寬度高度二者更大者/100

哪些地方能夠用到

一個老是在屏幕上可見的元素。使用高度和寬度設置爲低於100的vmin值將能夠實現這個效果。
一個老是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊)

.box {
    height: 100vmax;
    width: 100vmax;
}
複製代碼

參考文章

前端開發中像素的概念bash

最全的CSS尺寸單位介紹

CSS3中常見的單位移動設備分辨率（終於弄懂了爲何移動端設計稿老是640px和750px）

幾個CSS的單位你須要瞭解一下

個人博客

歡迎訪問個人博客，會分享一些技術文章，一塊兒學習前端。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。