px
像素瞧壮，pixel的縮寫(xiě)登馒。
作用：px設(shè)置固定的布局或者元素大小
rpx
rpx (responsive pixel)
??微信小程序解決自適應(yīng)屏幕尺寸的尺寸單位
微信小程序規(guī)定屏幕的寬度為750rpx。
解釋：將屏幕的寬度分為750份咆槽，1份就是1 rpx
em
參考物：父元素的font-size
??如果自身定義了font-size陈轿，按自身計(jì)算。整個(gè)頁(yè)面內(nèi)1 em不是固定的值秦忿。
特點(diǎn)：
1.em的值不是固定的
2.em繼承父級(jí)元素的字體大小
rem
參照物：根元素html
??只需在根元素確定參考值麦射，可以設(shè)計(jì)HTML為大小為10px，則設(shè)置1.2rem表示12px灯谣。
優(yōu)點(diǎn):只需設(shè)置根目錄的大小就可以將整個(gè)頁(yè)面成比例的調(diào)好法褥。
%
一般來(lái)說(shuō)，相對(duì)于父元素
- 普通定位元素就是相對(duì)于父元素
-
position: absolute的元素相對(duì)于已定位的父元素 -
position: fixed的元素相對(duì)于Viewport（視口）酬屉。
vw
- CSS3新單位
- Viewport Width的簡(jiǎn)寫(xiě)，指可視窗口的寬度。
- 視口的寬度為1200px的話呐萨，100vw等于1200px杀饵，10vw等于120ox，以此類(lèi)推
- 假設(shè)谬擦，瀏覽器寬度為1200px切距，1vw = 1200px / 100 = 12px
vh
- CSS3新單位
- Viewport Height的簡(jiǎn)寫(xiě)，指視口的高度惨远。
- 視口的高度為1200px的話谜悟，100vh等于1200px，10vh等于120ox北秽，以此類(lèi)推
- 假設(shè)葡幸，瀏覽器寬度為900px，1vw = 900px / 100 = 9px
vm
- CSS3新單位
- 相對(duì)于視口的寬度或高度較小的那個(gè)贺氓。
- 其中最小的那個(gè)被均分100份的大小就是
1 vm - 假設(shè)蔚叨，瀏覽器高度為800px，寬度為1000px辙培，則1vm = min(800, 1000)px / 100 = 8px
- 兼容性較差蔑水，不建議使用
補(bǔ)充內(nèi)容
Viewport 視口
pc端，Viewport指的是瀏覽器的可視區(qū)域
移動(dòng)端扬蕊，涉及3個(gè)視口：Layout viewport（布局視口）搀别、Visual viewport（視覺(jué)視口）、Ideal viewport（理想視口）尾抑。Viewport指的是其中的Layout Viewport歇父。
根據(jù)CSS3規(guī)范，視口單位包括以下4個(gè)
-
vw:
1 vw等于視口寬度的1% -
vh:
1 vh等于視口高度的1% -
vmin: 選取
vw和vh中最小的那個(gè) -
vmax: 選取
vw和vh中最大的那個(gè)
