px與rem的換算

時間 2019-12-13

標籤 rem 換算欄目 CSS 简体版

原文原文鏈接

在線轉化工具： http://www.ofmonkey.com/front/remcss

rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個參考值，這個參考值設置爲多少，徹底能夠根據您本身的需求來定。

html

若是，瀏覽器默認的字號16px，來看一些px單位與rem之間的轉換關係：
css3

因爲rem是css3中的一個屬性，不少人首先關注的就是瀏覽器對他的支持度，截了一張caniuse對rem屬性的兼容表：瀏覽器

1rem等於多少px呢？·post

1rem等於html根元素設定的font-size的px值，假如咱們在css裏面設定下面的css。flex

//code from http://caibaojian.com/rem-and-px.html
html{font-size:14px}

那麼後面的CSS裏面的rem值則是以這個14來換算，例如設定一個div寬度爲3rem,高度爲2.5rem.則它換算成px爲width:42px.height:35px，同理，假如一個設計稿爲寬度42px,高度爲35px，則換成成rem，則是42/14=3rem，35/14=2.5rem。spa

若是css裏面沒有設定html的font-size，則默認瀏覽器以1rem=16px來換算

設計

rem實現移動端自適應： http://caibaojian.com/flexible-js.htmlcode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。