1.rem和em、px
首先來說說em和px的關係 em是指字型高度 瀏覽器預設1em=16px,所以0.75em=12px;
我們經常會在頁面上看到根元素寫的font-size:62.5%; 這樣em就成了16px*62.5=10em;這是顯示在頁面的字型大小是10px;
這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了,
em的特點
em是個相對值 他會根據父級元素的大小而變化
但是如果巢狀了多個元素 要計算它的大小,是件很頭疼的事情
這樣的情況下,就出現了rem
rem的區別在於它是相對於根基元素的,因此不會被它的父類影響到
結論：之所以前端行業做移動端會普遍預設用rem或em,是因為可以通過js控制根元素(或者用@media)來達到適配各種解析度的字型大小的效果
1.vh、vw和%
vh vw全稱為viewport height和viewport width 意思就是視窗
很多情況下它們都是重疊的 各有優缺點 概括一下 就是
當處理寬度的時候，%單位更合適。處理高度的時候，vh單位更好。
(ps:比如你需要定位一屏內的一段文字,如果你用% 它計算的是你整個dom的高度,而vh計算的當前一屏的高度)
% 也是相對父級元素大小變化
在網頁設計中我們經常看見body這樣的設定，為什麼偏偏是62.5%呢？這主要是為了方便em與px相互轉換，em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們在設定的時候很少看見19.2px這樣表示的大小，也就是在用px表示大小時數值是不帶小數字的。當設定了body時，1em則=16px*62.5%=10px,1.2em則=12px，這是不是就簡單多了，準確多了呢
body
p
rem 單位 和 em 單位
首先要知道 rem 和 em 是相對單位 我們通過 來看 rem 和 em的使用和區別 em 相對於父級 test 16px test test 顯示效果 我們可以看到，首先我們重置瀏覽器的預設顯示字型大小為16px 即便預設顯示大小也是16px body中的第乙個段落標籤的字型大小也就是16px ...
em和rem的區別
rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小而不是相對于父元素字型的大小。這樣可以根據螢幕的尺寸，比較容易的控制頁面的布局效果。例如，根元素 html 設定font size 16px 非根元素設定width...
em和rem的概念和用法
em相對長度單位 相對參照物為父元素的font size em有繼承性 沒有設定font size時,瀏覽器會有乙個預設的em設定 rem相對參照物為根元素html,相當於參照物固定不變 比較好計算 沒有設定font size時,瀏覽器有乙個預設的rem 有相容性問題,並不是所有瀏覽器都支援rem,...