em 和 rem 筆記

簡單介紹

單位

在編寫網頁過程中，需要對元素（標簽）進行寬高、顏色、字體等的設置，這些需要使用單位。
在css中，設置字體和寬高使用的單位可以一致，例如： px/em/rem/...

rem 來源

rem 是css3中的單位

和px的關系

px是使用最多的單位。
em和rem可以和px單位進行換算，就如克和千克可以換算一樣。
具體換算規(guī)則，如下。

建議

在做移動端項目的時候，建議使用rem作為單位
可以方便、快捷、容易的實現(xiàn)響應式效果

em詳細說明

em 參照父級元素大小

如果父元素 font-size:20px;, 給子元素設置字體font-size:1em;, 子元素其實就是20px的大小

** 示例：**

• 設定1em = 20px
• 2em = 40px
• 2.5em = 50px
• 0.5em = 10px

em合適的使用場景：text-indent(首行縮進)/line-height(行高)

rem詳細說明

rem參考的是html標簽字體大小

rem 和 em 不通電就是 em 參考各自的父元素， 如果父元素沒有設置字體大小，則繼續(xù)向上尋找（父父元素）， 直至最后
rem 直接參照html標簽字體大小，并且是所有使用rem 單位的都是參照html標簽
所有只需要更改html``標簽字體大小，就可以影響全部使用rem`單位的標簽

** 代碼示例：**

html {
    font-size:100px;
    }
.title {
    width:5rem;  /*500px*/
    height:5rem;   /*500px*/
   font-size:.3rem;  /*30px*/
   }

在做響應式網址時，可以根據媒體查詢去調節(jié)html標簽字體大小,實現(xiàn)共同調節(jié)其他變遷大小的效果
使用媒體查詢去調節(jié)html標簽字體大小，效果不夠精細（大小都是分段改變的），可以使用javascrit動態(tài)計算html的font-size

使用注意點

在rem 使用過程中，要時刻注意字體最小12px的問題
設置html的font-size屬性的時候，最好不要小于12px
如果設置了10px，使用1rem的時候，其實就是12排序，因為最小12px