## px,em,rem之間的關系和換算方式
**使用rem與em的原因**:當平板過渡到pc端的時候,字體大小是不是應該要變大一點,不然pc端看到的字體和平板字體一樣大小,對使用pc打開網頁用戶來說就小了很多。又當平板過渡到手機端的時候,字體是不是又要變小一點,不然對使用手機用戶來說,平板看到的字體大小正好,到手機就會感覺大了一點。這個時候你設置用媒體查詢來設置html根節點的大小來控制rem大小就很方便了。
* px:像素,相對長度單位,相對于屏幕分辨率而言;px的缺點是其不能適應瀏覽器縮放時產生的變化,因此一般不用于響應式網站。
* em:相對長度單位,相對于當前容器內( 父元素 )的文本的字體尺寸;如果當前容器字體沒設置字體大小,則以瀏覽器的默認字體尺寸來計算,em會繼承父輩設置,所以會發現當前的文本字體會復合,是可變的;em是相對于其父元素來設置字體大小的,這樣就會存在一個問題,進行任何元素設置,都有可能需要知道他父元素的大小。
* rem:css3新增的單位,也是相對長度單位,它相對于html的根元素,一般是body的字體設置值,這也是與em的本質區別;
**px與rem之間的換算**
`rem`是相對于根元素`<html>`,這樣就意味著,我們只需要在根元素確定一個參考值,這個參考值設置為多少,完全可以根據您自己的需求來定。rem可以做到只修改根元素的比例,就可以通過這個比例調整所有字體大小。
我們都知道,瀏覽器默認的字體大小是`16px`,來看一些`px`單位與`rem`之間的轉換關系:
~~~
| px | rem |
------------------------
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
-------------------------
~~~
為了方便計算,通常將在`<html>`元素中設置`font-size`值為`62.5%`,相當于在`<html>`中設置`font-size`為`10px`,此時,上面示例中所示的值將會改變:
~~~
| px | rem |
-------------------------
| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
-------------------------
~~~
如果你根元素的字體大小選62.5%,那px和rem之間的換算就是px直接除以10就得到rem了。例如,假設一個div寬度為2rem,高度為3rem.則它換算成px為 width:20px.height:30px,同理,假如一個設計稿為寬度20px,高度為30px,則換成成rem,則是 20/10=2rem,30/10=3rem。
*****
**px與em之間的換算**
**1.** em和px如何進行換算
為了簡化font-size的換算,需要在css中的body選擇器中先全局聲明 font-size=62.5%,很多初學者可能會在此定義0.625em或者直接定義12px,這是沒有效果的,一定要定義font-size=62.5%!
這就使em值變為 16px \* 62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然后換上em作為單位就行了。
由于em具有會繼續父級出血元素的字體大小的特點,這使得1em=10px,所以12px=1.2em。px與em的轉換通過10就可以得來,很方便了吧!
**2.** CSS中應用em需要注意兩點
* body選擇器中聲明Font-size=62.5%。
* 將你的原來的px數值除以10,然后換上em作為單位。
* 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。
**注意** :
1. 如果沒有在根元素(html字體)指定參照值,那瀏覽器默認1 rem就是16px,若指定值,則1rem就是指定值 ,也就是所有未經調整的瀏覽器都符合:1em = 1rem = 16px。
2. html設置為62.5%或者10px時會失效,是因為 小于12px或者75%的字體大小 不支持換算。這可能與有些瀏覽器不支持12px以下的大小有關。所以,使用rem單位,html的字體默認字體大小必須設置為12px或以上。若小于12px則瀏覽器換算時自動默認字體為12px。
3. ??選擇使用什么字體單位主要由你的項目來決定,如果你的用戶群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮兼容性,那就使用px,或者兩者同時使用。
**瀏覽器的兼容性**
除了IE6-IE8r,其它的瀏覽器都支持em和rem屬性,px是所有瀏覽器都支持。為了瀏覽器的兼容性,可“px”和“rem”一起使用,用"px"來實現IE6-8下的效果,然后使用“rem”來實現其他瀏覽器的效果。
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)