1.rem和em、px
首先來說說em和px的關(guān)系 em是指字體高度 瀏覽器默認(rèn)1em=16px,所以0.75em=12px;我們經(jīng)常會(huì)在頁面上看到根元素寫的font-size:65%; 這樣em就成了16px*62.5=10em;這是顯示在頁面的字體大小是10px;
這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數(shù)值除以10缓屠,然后換上em作為單位就行了,
em的特點(diǎn)
em是個(gè)相對(duì)值 他會(huì)根據(jù)父級(jí)元素的大小而變化
但是如果嵌套了多個(gè)元素 要計(jì)算它的大小,是件很頭疼的事情
這樣的情況下,就出現(xiàn)了rem
rem的區(qū)別在于它是相對(duì)于根基元素的,因此不會(huì)被它的父類影響到
結(jié)論:之所以前端行業(yè)做移動(dòng)端會(huì)普遍默認(rèn)用rem或em,是因?yàn)榭梢酝ㄟ^js控制根元素(或者用@media)來達(dá)到適配各種分辨率的字體大小的效果
1.vh、vw和%
vh vw全稱為Viewport Height和Viewport Width 意思就是視窗?
很多情況下它們都是重疊的 各有優(yōu)缺點(diǎn) 概括一下 就是
當(dāng)處理寬度的時(shí)候娜饵,%
單位更合適妹卿。處理高度的時(shí)候儡首,vh
單位更好毕莱。
(ps:比如你需要定位一屏內(nèi)的一段文字,如果你用% 它計(jì)算的是你整個(gè)dom的高度,而vh計(jì)算的當(dāng)前一屏的高度)