前言
在學(xué)習(xí)的過程中,發(fā)現(xiàn)CSS有很多可以描述單位的尺寸。比如px,em,rem,vw等等。平時(shí)也沒有深究，一來是沒時(shí)間，二來是在我學(xué)習(xí)清單中優(yōu)先級過低。一直想徹底弄明白，一直耽擱到現(xiàn)在。現(xiàn)在花上一點(diǎn)時(shí)間來整理一下，徹底弄懂它。
CSS長度單位
- 絕對長度單位。
絕對長度單位表示為一個(gè)固定的值，不會改變。不利于頁面渲染。- in,英寸
- cm, 里面
- mm, 毫米
- pt
- pc
- 相對長度單位。
其長度單位會隨著它的參考值的變化而變化。- px,像素
- em,元素的字體高度
- %,百分比
- rem,根元素的font-size
- vm,視窗寬度，1vw=視窗寬度的1%
- vh,視窗高度，1vh=視窗高度的1%
物理像素(設(shè)備像素)
比如有一個(gè)圖片，細(xì)分，最小單位就是像素。也就是說，圖片由許多的像素構(gòu)成。像素是小方塊，這些小方塊都有一個(gè)明確的位置和被分配的色彩數(shù)值，小方格顏色和位置就決定該圖像所呈現(xiàn)出來的樣子。
一個(gè)設(shè)備生產(chǎn)出來，它們的像素就已經(jīng)確定了。iPhone5的分辨率是
640x1136px,代表屏幕由640行，1136列像素小方塊組成。
為了理解像素和避免與CSS像素混淆，
可以將物理像素當(dāng)做物理小方塊。
比如iPhone5的像素是640X1136px,可以當(dāng)做640*1136個(gè)小方塊。
分辨率
也叫做解析度，解像度?？梢詮娘@示分辨率與圖像分辨率兩個(gè)方向來分類。
- 屏幕分辨率。是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少，即顯示器可以可以顯示的小方塊有多少個(gè)。
- 顯示器的可顯示的小方塊越多，畫面就越精細(xì)，同樣的屏幕區(qū)域內(nèi)能顯示的信息也越多
- 可以把整個(gè)圖像想象成是一個(gè)大型的棋盤，而分辨率的表示方式就是所有經(jīng)線和緯線交叉點(diǎn)的數(shù)目。棋盤的小方塊越多，可以放的棋子就越多。
- 顯示分辨率一定的情況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時(shí)，顯示分辨率越高圖像越清晰。(小方塊一樣多的情況下，顯示屏越小越清晰；屏幕大小一樣大的時(shí)候，小方塊越多圖形越清晰)
CSS像素px
CSS像素的單位也叫做px。它是圖像顯示的基本單元，既不是一個(gè)確定的物理量，也不是一個(gè)點(diǎn)或者小方塊，而是一個(gè)抽象概念。所以在談?wù)撓袼貢r(shí)一定要清楚它的上下文！
- 為了保證閱讀體驗(yàn)一致，CSS可以自動在不同設(shè)備之間可以調(diào)節(jié)。即一份代碼可以在不同的大小的設(shè)備之間顯示，并且可以保證閱讀體驗(yàn)一致。
- 默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度。
- 但是在高PPI的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。比如iPhone的屏幕對比一般的手機(jī)屏幕會看起來更精細(xì)清晰一些。
- 在瀏覽器上通過
ctrl +/-可以擴(kuò)大縮小屏幕，其實(shí)就是屏幕分辯率的調(diào)低/調(diào)高。ctrl +屏幕放大，分辨率降低。 - iPhone6,7,8都是兩倍屏手機(jī)，即一個(gè)CSS像素等于2物理像素。iPhone6Plus等是三倍屏手機(jī)，一個(gè)CSS像素等于3物理像素。
- 以iPhone6為例，設(shè)計(jì)稿給出一個(gè)圖片寬高為40*40。在實(shí)際開發(fā)中要除以2，寬高要寫成20x20。因?yàn)閕Phone6是兩倍屏手機(jī)。
em
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸,瀏覽器字體默認(rèn)為16px。
- 所以，1em = 16px。默認(rèn)情況下。
如何高效使用em呢
- body里聲明font-size:62.5%。即全局聲明
1em = 16px * 62.5% = 10px - 之后可以把
em當(dāng)做px使用。當(dāng)然此時(shí)，1em = 10px - 如果在父容器里說明了
font-size:20px,那么在子容器里的1em就等于20px。
rem
rem單位是相對于字體大小的html元素，也稱為根元素。
html {
font-size: 10px; /* 不建議設(shè)置 font-size: 62.5%; 在 IE 9-11 上有偏差，具體表現(xiàn)為 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
em與rem
- rem是相對于根元素（html）的字體大小，而em是相對于其父元素的字體大小。
- em最多取到小數(shù)點(diǎn)的后三位
<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>
上面的例子中，發(fā)現(xiàn)了一個(gè)有意思的情況。em 會層層繼承父元素的字體大小，很容易造成字體大小的混亂。所以以后用rem會更好。
rpx
rpx 是微信小程序解決自適應(yīng)屏幕尺寸的尺寸單位。微信小程序規(guī)定屏幕的寬度為750rpx。
無論是在iPhone6上面還是其他機(jī)型上面都是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
哪些地方可以用到
- 一個(gè)總是在屏幕上可見的元素。使用高度和寬度設(shè)置為低于100的vmin值將可以實(shí)現(xiàn)這個(gè)效果。
- 一個(gè)總是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊)
.box {
height: 100vmax;
width: 100vmax;
}
參考文章
CSS3中常見的單位
移動設(shè)備分辨率（終于弄懂了為什么移動端設(shè)計(jì)稿總是640px和750px）
