px、em、rem、%、vw、vh、vm等單位有什麼區別？
這裏是修真院前端小課堂，每篇分享文從css
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】html
八個方面深度解析前端知識/技能，本篇分享的是：前端
【px、em、rem、%、vw、vh、vm等單位有什麼區別？】css3
px、em、rem、%、vw、vh、vm等單位有什麼區別？程序員
你們好，我是IT修真院西安分院第5期的學員許恆倩，一枚正直純潔善良的web程序員，今天給你們分享一下，修真院官網CSS任務三，深度思考中的知識點——px、em、rem、%、vw、vh、vm等單位有什麼區別？web
（1）背景介紹：chrome
傳統的項目開發中，咱們只會用到px、%、em這幾個單位，它能夠適用於大部分的項目開發，瀏覽器
而且擁有比較良好的兼容性。可是從css3開始，瀏覽器對邏輯單位的支持又提高到了另一個境界，字體
增長了rem、vh、vw、vm等一些新的長度單位，咱們能夠利用這些新的單位開發出比較良好的響應式頁面，編碼
隨之覆蓋多種不一樣分辨率的終端，包括移動設備等。接下來就講下這些長度單位有什麼區別。
（2）知識剖析：
- PX
px單位名稱爲像素，像素是固定大小的單元,用於屏幕媒體(即在電腦屏幕上讀取)。一個像素等於電腦屏幕上的一個點
(是你屏幕分辨率的最小分割)。是 CSS 中最經常使用的長度單位，能夠用來指定字體大小，元素的寬度、高度、邊框、內邊距，外邊距的大小等等
px是絕對長度單位，它不會根據屏幕的大小進行調整。
2.%
百分比是一個相對長度單位，相對於包含塊（containing block）的高寬或字體大小。
關於包含塊（containing block）的概念，不能簡單地理解成是父元素。
若是是靜態定位和相對定位，包含塊通常就是其父元素。
若是是絕對定位的元素，包含塊應該是離它最近的 position爲非static屬性的祖先元素。
若是是固定定位的元素，它的包含塊是視口（viewport）
- EM
em是相對字體長度單位。若是用於font-size屬性自己，則是相對於父元素的font-size。
em單位有以下特色：
- em的值並非固定的;
- em會繼承父級元素的字體大小。
em是繼承父元素的字體大小，但是當父元素字體大小改變時，又得從新計算了。
- REM
rem是CSS3新增的一個相對字體長度單位，只相對根元素即html元素字體大小
因此咱們只要在html標籤上設置字體大小爲標準，文檔中的字體大小都會以此爲參照
咱們知道任意瀏覽器的默認字體大小都是16px。
爲了簡化font-size的換算，須要在css中的根元素html中聲明font-size=62.5%，這就使rem值變爲 16px*62.5%=10px,
這樣 10px=1rem, 也就是說只須要將你的原來的px數值除以10，而後換上rem做爲單位就好了
- VW 和VH
CSS3新增的長度單位,分別是viewpoint Width和viewpoint Height的縮寫。
1vh 等於1/100的視口高度。舉個列子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
同理，若是視口寬度爲750， 1vw = 750px/100 = 7.5 px
- VM
vmin 是當前 vm 和 vh 中較小的一個值，也就是說，是可視區域較小的一邊的1/100的長度；
例如：可視區大小爲 1000x800, 則 wmin = 800/100 = 8px;
若是可視區大小爲 600x800, 則 wmin = 600/100 = 6px;
相似的, vmax 是當前 vm 和 vh 中較大的一個值，也就是說，是可視區域較大的一邊的1/100的長度；
例如：可視區大小爲 1000x800, 則 wmin = 1000/100 =10px;
若是可視區大小爲 600x800, 則 wmin = 800/100 = 8px;
（3）常見問題：
在使用REM爲單位時，爲什麼將HTML的FONT-SIZE:625%
（4）解決方案：
大部分現代瀏覽器默認時16px,chrome強制最小字體爲12號，即便設置成 10px 最終都會顯示成12px，
當把html的font-size設置成10px,子節點rem的計算仍是以12px爲基準，
因此提到的將html的font-size設爲10方便計算不是那麼可取)。致使chrome的em/rem計算不許確。
爲了解決這個坑，設置html字體爲625%，即100px，body 修正爲16px，這樣 0.1rem 就是 10px，
而body的字體仍然是默認大小，不影響未設置大小的元素的默認字體的大小。
（5）編碼實戰：
body {
font-size: 20px;
}
.txt {
font-size: 1.5em;
}
.block {
font-size: 1.5em;
}
</style>
<body>
<div class="txt">
我是文字
<div class="block">
我是文字2
</div>
</div>
</body>
（6）拓展思考：
CSS還有哪些長度單位？
英寸in(inches) 1in = 96px
釐米cm(centimeters) 1cm = 37.8px
點pt(points) 1pt = 1.33px
派卡pc(picas) 1pc = 16px
（7）參考文獻：
參考：
你可能不瞭解的七個 CSS 單位
CSS/CSS3長度、時間、頻率、角度單位大全--張鑫旭
（8）更多討論：
Q1：提問人：若是父元素沒有指定高度，那麼子元素的百分比的高度是多少？
A1：我：會按照子元素的實際高度，設置百分比已經沒有效果了。
（9）結束語：
今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~
- 1. px、em、rem、%、vw、wh、vm等單位有什麼區別？
- 2. px、em、rem、%、vw、vh、vm這些單位的區別
- 3. px、em、rem、%、vw、vh、vm 這些單位的區別
- 4. vw，vh，px，%，em，rem
- 5. px、em、rem、vh、vw
- 6. CSS單位px、em、rem、vh、vw、vmin、vmax
- 7. px,em,rem,vh,vw,vmin,vmax的區別
- 8. px、em、rem區別 pt ppi dpi vw vh
- 9. Css單位px，rem，em，vw，vh的區別
- 10. Css單位px,rem,em,vw,vh的區別
- 更多相關文章...
- • Hibernate是什麼 - Hibernate教程
- • MyBatis是什麼 - MyBatis教程
- • 再有人問你分佈式事務，把這篇扔給他
- • IDEA下SpringBoot工程配置文件沒有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。