css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin
格言:努力做好自己喜歡的每一件事
國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那么三者的區別與優勢是什么？接下來我們就來學習一下吧！
單位px、em、rem分別表示什么？
1、 px(Pixel) 相對于顯示器分辨率而言，表示“絕對尺寸”(并非真正的絕對)，實際上就是css中定義的像素(這里的像素與設備的物理像素有一定的區別)，利用px設置字體大小及元素寬高等比較穩定和精確。px的特點如下：
IE無法調整那些使用px作為單位的字體大小；
國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；
Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
px不能適應瀏覽器縮放時產生的變化，因此一般不用于是響應式網站。
2、em 表示相對尺寸，其相對于當前對象內 (父級元素) 文本的字體尺寸 font-size(如當前對行內文本的字體尺寸未被設置，則相對于瀏覽器的默認字體尺寸。 任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合：1em = 16px。)。使用em可以較好的相應設備屏幕尺寸的變化，但是在進行元素設置時都需要知道父元素文本的font-size及當前對象內文本的font-size，如有遺漏可能會導致錯誤。em的特點如下：
em的值并不是固定的；
em會繼承父級元素的字體大小。
3、rem 為css3新增的一個相對單位，使用rem為元素設定字體大小時，仍然是相對大小，但是rem只相對于HTML根元素的font-size，因此只需要確定這一個font-size。使用rem的好處是只修改根元素就可以成比例的調整所有字體的大小，又可以避免字體大小逐層復合的連鎖反應。
目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。以下是我在 caniuse對rem屬性的兼容表：
對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。如下：
元素{
font-size:14px;
font-size:2rem;
}
rem、em與px間的換算關系
1、 px與em之間的換算關系
任意瀏覽器的默認字體大小16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em，這樣換算起來有點麻煩，而且容易換算出錯。所以，為了簡化font-size的換算，我們可以制定一個單位換算基準：需要在css中的body選擇器中聲明font-size=62.5%，代碼如下：
body{
font-size:62.5% ;
}
這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。基準對照表如下圖：
總結：我們在寫CSS的時候，需要注意以下兩點：
1)body選擇器中聲明font-size=62.5%；
2)將你的需要轉換的px數值除以10，然后換上em作為單位；
3)重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。
我們來舉一個例子來說明一下：
你猜我字體是多大？em
body{
font-size:62.5%;
}
div{
font-size:1.2em; //font-size=10 *1.2 =12px
}
p{
font-size:1.2em; //font-size= 12*1.2=14.4px
}
我們可以的到p的字體大小為14.4px，如下：
p的字體大小是怎么計算的呢？因為em相對于當前對象內 (父級元素) 文本的字體尺寸，p是div的子元素，div是body的子元素，要想的到p的字體大小就要先的到div的字體大小，因為body選擇器中聲明了font-size=62.5%，所以div的字體大小為1.2*10=12px，相當于div聲明了font-size=75%(1em=12px)，因為p：1.2em，所以p的字體大小轉換為px:12*1.2=14.4px。這里就應證了em單位的缺點。
2、 px與rem之間的換算關系
從上面可以得到rem是一個相對大小的值，它相對于根元素，瀏覽器的默認字體尺寸也是16px。這時 px與rem之間的換算是1rem=16rem。下面是默認16px與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的字體大小的值為html｛font-size: 87.5%;｝(也就是1rem=14px)。然后其他的字體大小就是將你要的值除以14得到的值加上 rem 單位。上面的14是個變量，相對于你對根元素html字體大小的設定，如果你設定的是62.5%，那除數就變成10了。如果你根元素的字體大小選62.5%，那px和rem之間的換算就是px直接除以10就得到rem了。為了簡化font-size的換算，我們在html中也可以寫入以下代碼:
html{
font-size: 62.5%; /* 公式16px*62.5%=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
我們來舉一個例子來說明一下：
你猜我字體是多大？rem
html{
font-size: 62.5%; /* 公式16px*62.5%=10px */
}
div{
font-size:2rem;
}
p{
font-size:2rem;
}
我們可以得到p的字體大小轉換為px為：20px
p的字體大小是怎么計算的呢？因為rem只相對于HTML根元素的font-size，所以rem 以html{ font-size: 62.5%; }為轉換基準 公式16px*62.5%=10px相當于1rem=10px，然后就可以得到p的字體大小：10*2rem=20px。
注意：
若沒有在根元素(html字體)指定參照值，那瀏覽器默認1rem 就是16px，若指定值，則1rem就是指定值 。
html設置為62.5%或者10px 時會失效，是因為小于12px或者75%的字體大小不支持換算。這可能與有些瀏覽器不支持12px 以下的大小有關。所以，使用rem單位，html的字體默認字體大小必須設置為12px或以上。若小于12px則瀏覽器換算時自動默認字體為12px。
總的來說，為了簡化font-size的換算，我們通常將rem與em的換算基準設置為 font-size : 62.5%; ，則此時1rem=1em = 16px * 62.5% = 10px， 這樣10px = 1em=1rem，方便于我們使用。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!
總結
以上是生活随笔為你收集整理的css中的单位换算_CSS单位px、em、rem及它们之间的换算关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue 公众号扫描_vue编写微信公众号
- 下一篇： 02.CSS基础笔记及导入