在學習的過程中,發現CSS有很多可以描述單位的尺寸。比如px,em,rem,vw等等。平時也沒有深究，一來是沒時間，二來是在我學習清單中優先級過低。一直想徹底弄明白，一直耽擱到現在。現在花上一點時間來整理一下，徹底弄懂它。
CSS長度單位
- 絕對長度單位。 絕對長度單位表示爲一個固定的值，不會改變。不利於頁面渲染。
- in,英寸
- cm, 裏面
- mm, 毫米
- pt
- pc
- 相對長度單位。 其長度單位會隨着它的參考值的變化而變化。
- px,像素
- em,元素的字體高度
- %,百分比
- rem,根元素的font-size
- vm,視窗寬度，1vw=視窗寬度的1%
- vh,視窗高度，1vh=視窗高度的1%
物理像素(設備像素)
比如有一個圖片，細分，最小單位就是像素。也就是說，圖片由許多的像素構成。像素是小方塊，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。
一個設備生產出來，它們的像素就已經確定了。iPhone5的分辨率是640x1136px,代表屏幕由640行，1136列像素小方塊組成。
爲了理解像素和避免與CSS像素混淆，
可以將物理像素當做物理小方塊。
比如iPhone5的像素是640X1136px,可以當做640*1136個小方塊。
web前端開發學習Q-q-u-n： 767273102 ，分享開發工具，零基礎，進階視頻教程，希望新手少走彎
分辨率
也叫做解析度，解像度。可以從顯示分辨率與圖像分辨率兩個方向來分類。
- 屏幕分辨率。是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少，即顯示器可以可以顯示的小方塊有多少個。
- 顯示器的可顯示的小方塊越多，畫面就越精細，同樣的屏幕區域內能顯示的信息也越多
- 可以把整個圖像想象成是一個大型的棋盤，而分辨率的表示方式就是所有經線和緯線交叉點的數目。棋盤的小方塊越多，可以放的棋子就越多。
- 顯示分辨率一定的情況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時，顯示分辨率越高圖像越清晰。(小方塊一樣多的情況下，顯示屏越小越清晰；屏幕大小一樣大的時候，小方塊越多圖形越清晰)
CSS像素px
CSS像素的單位也叫做px。它是圖像顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。所以在談論像素時一定要清楚它的上下文！
- 爲了保證閱讀體驗一致，CSS可以自動在不同設備之間可以調節。即一份代碼可以在不同的大小的設備之間顯示，並且可以保證閱讀體驗一致。
- 默認情況下一個CSS像素應該是等於一個物理像素的寬度。
- 但是在高PPI的設備上，CSS像素甚至在默認狀態下就相當於多個物理像素的尺寸。比如iPhone的屏幕對比一般的手機屏幕會看起來更精細清晰一些。
- 在瀏覽器上通過
ctrl +/-可以擴大縮小屏幕，其實就是屏幕分辯率的調低/調高。ctrl +屏幕放大，分辨率降低。 - iPhone6,7,8都是兩倍屏手機，即一個CSS像素等於2物理像素。iPhone6Plus等是三倍屏手機，一個CSS像素等於3物理像素。
- 以iPhone6爲例，設計稿給出一個圖片寬高爲40*40。在實際開發中要除以2，寬高要寫成20x20。因爲iPhone6是兩倍屏手機。
em
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸,瀏覽器字體默認爲16px。
- 所以，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元素，也稱爲根元素。
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>
web前端開發學習Q-q-u-n： 767273102 ，分享開發工具，零基礎，進階視頻教程，希望新手少走彎
上面的例子中，發現了一個有意思的情況。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;
}