- px, pt
- em, rem
- vw,vh
1. px(pixel)像素侈离，pt(point)磅
px像素描述了一個(gè)屏幕能展示的最小單位覆醇。在計(jì)算機(jī)編程中拌阴，像素組成的圖像叫位圖或光柵圖像性雄，像素是光柵圖像中最小的物理點(diǎn)留拾。
pt是一個(gè)專用的印刷單位“磅”因篇，大小為1/72英寸泞辐。
可以看到px是個(gè)相對(duì)值笔横，而pt是個(gè)絕對(duì)值。
你不可能在實(shí)際屏幕上畫出低于1px的點(diǎn)咐吼。
補(bǔ)充1：《像素不是一個(gè)小正方形吹缔，像素不是一個(gè)小正方形，像素不是一個(gè)小正方形》from 微軟锯茄。好玩的事參見為什么部分街機(jī)游戲的畫面寬于正常比例厢塘？ - Thinkraft的回答 - 知乎
補(bǔ)充2: 響應(yīng)式開發(fā)DPR了解一下：響應(yīng)式網(wǎng)頁(yè)開發(fā)基礎(chǔ)：DPR 與 viewport
2. em， rem
em 是一個(gè)相對(duì)大小撇吞，可以指定到小數(shù)點(diǎn)后三位俗冻。它相對(duì)于父元素的font-size。比如說(shuō)父元素的字體大小為16px牍颈，給子元素設(shè)定為0.75em迄薄，那么子元素的字體大小就是16x0.75=12px。
為什么叫em煮岁？ em指element M讥蔽，因?yàn)橛⑽淖帜钢蠱可以充滿一個(gè)字母的空間，所以取大寫M作為參照字母画机。
rem 的‘r’是‘root'冶伞，即根元素。rem只參照body的font-size步氏。
補(bǔ)充：
- 瀏覽器的默認(rèn)字體大小是16px响禽，所以一般1rem=16px。
- 如果元素自身沒有設(shè)置字體大小荚醒，那么元素自身上的所有屬性值如“boder芋类、width、height界阁、padding侯繁、margin、line-height”等值泡躯，我們都可以按下面的公式來(lái)計(jì)算
1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值
- 如果元素設(shè)置了字體大小贮竟，那么字體大小的轉(zhuǎn)換依舊按第二條公式計(jì)算，但此元素的其他屬性较剃，如“border咕别、width、height写穴、padding顷级、margin、line-height”計(jì)算就需要按照下面的公式來(lái)計(jì)算：
1 ÷ 元素自身的font-size × 需要轉(zhuǎn)換的像素值 = em值
3. vw确垫，vh
view-width弓颈，view-height是CSS3新引入的單位，根據(jù)視窗寬高計(jì)算删掀。視窗寬度==100vw翔冀，視窗高度==100vh。
“視窗”所指為瀏覽器內(nèi)部的可視區(qū)域大小披泪，即window.innerWidth/window.innerHeight大小纤子，不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。
參看張?chǎng)涡耜P(guān)于vw款票、vh的文章
