使用相对长度单位rem布局网页内容
前言：上篇我們提到了相對單位em的用法，知道了em的概念，即是一個相對的單位，也知道了em的值不是固定的，p標簽里的em和p里面的div下面的1em的px值并不是一樣的。具體是多少呢？那就得看一下父級元素的值了，本級元素的px值隨著父級元素的變化而變化的，“進制”是瀏覽器的默認值（16px）;和em對應的還有個相對單位，就是我們今天重點要說的rem;
01
1rem等于多少px?
我們先來看一段代碼：
<!DOCTYPE html> <html><head><meta?charset="UTF-8"><title></title><style?type="text/css">html{font-size: 1rem;}</style></head><body><div?id="div1"><div?id="div2"><p>段落1</p></div></div></body> </html>在代碼中，我們先設置了html的字體大小為1rem,然后來看看“段落1”的字體大小是多少？
結果是16px，為什么？因為瀏覽器的默認字體大小是16px，此時的1rem就是16px了。
接下來，我們將div的的字體大小設置為1.5rem；再來看看“段落1”的字體大小是多少呢？
結果是24px，看到這個結果，大家是不是就很開心了呢？因為我們知道這個結果怎么算的，那就是16px*1.5rem的結果。
接下來我們再將div2的字體大小調整一下，為1.5rem,有的伙伴就安奈不住了，老師，這個我知道，這個的值是36px.按照em的思路算，24px*1.5rem,結果就是36px。那我們來看看結果：
為什么還是24px呢？怎么不是36px?問題就出在rem這個單位上，至此，我們就可以總結一下rem的特性：
rem的值不是固定的
rem的值與父級元素無關，與根級元素有關（本案例中即html的值）
“進制”也是瀏覽器的默認值（本案例中默認是16px）
這就是相對長度單位rem的用法，是不是很慶幸自己又學會了一個知識點呢？
往期精彩
使用相對長度單位em布局網頁內容
2020-11-02
binarySearch與IndexOf的那些事兒~
2020-11-01
新機必裝！那些你不知道的實用技軟件在這里！文末免費獲取
2020-10-31
自從有了這款辣椒醬，拌飯再也不用老干媽
2020-10-30
如何使用bootstrap實現輪播圖？
2020-10-29
點分享
點點贊
點在看
總結
以上是生活随笔為你收集整理的使用相对长度单位rem布局网页内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 笔记本电脑可以配置升级吗？
- 下一篇： 集合还有这么优雅的运算法？