返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

CSS3 中的 rem 值與 px 之間的換算

時間:2018-12-20 23:37來源:知行網www.aotfjk.live 編輯:麥田守望者

看 CSS 文件的時候發現引入了一個新大小單位:rem,雖然 CSS 文件注釋里有介紹,但看半天拿著手機上的計算器計算了幾下愣是沒搞明白,怕是新東西搜出來的都是英文看著累就沒找 google,而是百度了一下,百度的結果就是看到一篇文章被轉來轉去,來轉去,轉去,去。。。

郁悶之下回到主題的 CSS 再看那介紹,打開電腦的計算器,一計算,居然被我整明白了,原來原先計算值不等是因為我手機的計算器設置了只保留小數點后兩位的原因,真是囧。。。

其實 pxem 的關系我都沒整明白,就來說這個 rem 讓我覺得很忐忑的。。。

評論里有熱心同學一句話解決了我上面 px 和 em 關系問題:

em 以父元素為參照

remem 一樣,也是一個相對大小的值,它是相對于根元素 <html>,比如假設,我們設置 html 的字體大小的值為 html{font-size: 87.5%;}(也就是 14px,這是 twentytwelve 默認主題里的設置)。然后其他的字體就是將你要的值除以 14 得到的值;比如默認的twentytwelve主題大小是 960px;換算成 rem 就是 960/14=68.57142857142857rem(我這個用電腦的計算器計算的,比默認的更精確,嘿嘿);padding 的 24px 也就是 24/14=1.714285714285714rem(當然還是比 css 文件里的精確),以此類推。

簡單直白的說法,可以用評論里同學的一句話來表達:

如果你沒有在根元素指定參照值,那瀏覽器默認就是 1rem 為 16px,如果你指定了值假設為 20px,那 1rem 就為 20px。

emTable

上面的 14 是個變量,相對于你對根元素 html 字體大小的設定,如果你設定的是 62.5%,那除數就變成 10 了,對照表如右圖:

用這個 rem 單位的好處有啥我不知道,不過如果你根元素的字體大小選 62.5%,那 px 和 rem 之間的換算就是 px 直接除以 10 就得到 rem 了,這比 em 簡單多了,到現在我都沒搞清楚 em 和 px 之間是如何換算的。

另外 rem 在 ie8 及以下的版本不支持外其他瀏覽器都支持,如果你要考慮 ie8 及一下,可以像 twentytwelve 默認文件那樣設置個 px 再設置個 rem 就可以了。

再另外,有許多朋友問我:為啥 html 設置成 62.5%,或者 10px 時,這種換算無效了呢?經過研究發現,不知道什么時候開始,小于 12px 或者 75% 的字體大小 rem 確實不支持這種換算,這可能與現在有些瀏覽器不支持 12px 以下的大小有關。所以,記住一點:如果要使用 rem 單位,html 的字體默認大小必須設置為 12px 或以上才行。

------分隔線----------------------------
標簽(Tag):css
------分隔線----------------------------
推薦內容
猜你感興趣
湖南刘雪龙黑彩