關於rem的寬度和高度不生效的問題分析

現在很多前端都用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中文網其他相關文章！