2、px,em,rem之間的關系和換算方式 · Bootstrap前端響應式框架學習技術分享總結

## 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”來實現其他瀏覽器的效果。