現在很多前端都用rem來單位元素和字體大小
一般的設定是
html{
font-size:62.5%;
##}
換算來源1rem = 16px
10/16 = 0.625
這樣10px 就等於了1rem
#1.4rem = 14px （這樣很好換算）
1.6rem = 16px （這樣很好換算）
在chrome瀏覽器中有一個問題是字體小於12px統一都按12px
but 我們在計算元素的寬高是會出現問題
例如一個div的寬原先是100px 高是100px
按照我們原先的想法width:10rem & height: 10rem
可是現實中沒有達到我們的預期，真是的是width:120px (width :10rem) && height: 120px(height:rem)
#徹底懵逼了，怎麼可能。 。 。 。 。
字體大小沒有問題，為啥width和height不好使了。 。 。 。 。
原因在於chrome最小字體為12px，剛才已經提到過了，。 。
我們在html中設定了font-size：62.5% ，（= 10px）真正的是=12px
這時候我們知道原因了，可以這樣設置
把62.5% * 12
然後將原來的值統一除以2
例如
html{
font-size :125%;
}
div{
font-size: 0.8rem; /*真實值： 16px 怎麼來的 16/10/2=0.8*/
width: 5rem; /*真實值： 100px 怎麼來的100/10/2=5*/
}
#如果算術不太好的怎麼辦
我們可以設定用100來換算
html{
font-size:625%;
}
div{
font-size: 0.16rem; /*真實值： 16px 怎麼來的 16/100=0.16*/
#width: 1rem; / *真實值： 100px 怎麼來的100/100=1*/
}
這樣跟一起的62.5% 換算差不多，就是有從除10變成了除以100
#
以上是關於rem的寬度和高度不生效的問題分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
