大家好，我是半夏??，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注? 點贊 ?? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！
原文鏈接 ==>http://sylblog.xin/archives/51
前言
今天，我們生活在手機的世界里，有如此多的手機，有如此多的螢屏，螢屏的尺寸從當年的2.4英寸到3.5英寸、4.0英寸、5.0英寸等等，到現在基本上6.0英寸起步了，
em
它是相對于父字體大小的，
比如給元素設定font-size: 2em，這里的默認字體大小實際上是繼承自父親的大小，font-size: 2em表示當前元素字體大小是父親的2倍，
求下面em的px值
body{
font-size: 2em;
}
p {
font-size: 2em;
width: 2em;
}
<body>
em
<div>
<p>em</p>
</div>
</body>
第一個em的大小是32px,第二個em的大小的是64px，
html默認是16px，body是2em，是默認的2倍32px，
div是32px，p是div的2倍64px，
ch
它是相對于'0'（零）的寬度，
1ch就是一個'0'
div {
width: 3ch;
background: powderblue;
}
<div>000000</div>
rem
元素(html 節點)字體大小的倍數，
比如一個元素設定 width: 2rem 表示該元素寬度為html節點的font-size 大小的2倍，
如果html未設定font-size的大小，默認是16px，
注意！：Chrome 默認最小字體大小為12px，小于12px的字體都顯示12px大小，但是你可以Chrome瀏覽器的設定進行修改，
舉例
html{
font-size: 10px;
}
body {
font-size: 18px;
}
h1 {
font-size: 1rem;
}
這里的h1的字體大小是10px;
視口單位
視口單位(Viewport units)
什么是視口？
MDN
視口 (viewport) 代表當前可見的計算機圖形區域，在 Web 瀏覽器術語中，通常與瀏覽器視窗相同，但不包括瀏覽器的 UI， 選單欄等——即指你正在瀏覽的檔案的那一部分，
Web 瀏覽器包含兩個 viewport，布局視口 (layout viewport) 和視覺視口 (visual viewport)，visual viewport 指當前瀏覽器中可見的部分，并且可以變化，當使用觸屏雙指縮放，當動態鍵盤在手機上彈出的時候，或者之前隱藏的地址欄變得可見的時候，visual viewport 縮小了，但是 layout viewport 卻保持不變，
視
視口單位中的“視口”，是指布局視口，即window.innerWidth/window.innerHeight大小，
vw
它相對于視口寬度的1% ，
假設視口寬度1290px,則10vw 就是129px.
通過下面的動圖可以看到，當你拖拽瀏覽器的寬度的時候字體的大小是在變化的，拖拽高度的時候，字體大小是不變化的，
vh
1vw等于視口寬度的1%，
通過下面的動圖可以看到，當你拖拽瀏覽器的高度的時候字體的大小是在變化的，拖拽寬度的時候，字體大小是不變化的，
vmin
vmin表示視口的寬度和高度中的較小值，也就是vw 和 vh 中的較小值，如果視口寬度大于其高度，則將根據高度計算該值，
通過下面的動圖可以看到：
當你瀏覽器的寬度大于高度的時候，拖拽寬度,字體大小不變;拖拽高度，字體變化，
當你瀏覽器的高度大于寬度的時候，拖拽高度,字體大小不變;拖拽寬度度，字體變化
vmax
正好與vmin 相反
%
它是相對于父元素的，
% 對不同屬性有不同的含義：
例如：
font-size: 200% 和font-size: 2em 一樣，表示字體大小是默認（繼承自父親）字體大小的2倍，
例如： line-height: 200% 表示行高是自己字體大小的2倍，
例如：width: 100%表示自己content的寬度等于父親content寬度的1倍，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467076.html
標籤：其他
上一篇：JS初識
下一篇：JavaScript學習筆記