本篇文章為大家展示了rem和em和px以及vh 和vw和%的示例分析，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1.rem和em、px
首先來說說em和px的關系 em是指字體高度 瀏覽器默認1em=16px,所以0.75em=12px;我們經常會在頁面上看到根元素寫的font-size:65%; 這樣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計算的當前一屏的高度)
上述內容就是rem和em和px以及vh 和vw和%的示例分析，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
