remの幅と高さが反映されない問題の解析

多くのフロントエンドは要素とフォントサイズの単位に rem を使用するようになりました

一般的な設定は

html{

font-size:62.5%;

}

変換ソース 1rem = 16px

10/16 = 0.625

このように、10px は 1rem に相当します

1.4rem = 14px (これは変換が簡単です)

1.6rem = 16px (これは変換が簡単です)

Chrome ブラウザーにはフォントの問題があります12px より小さいものはすべて 12px です

しかし、要素の幅と高さを計算するときに問題が発生します

たとえば、div の幅は元々 100px、高さは 100px でした

によると当初の考えでは、幅: 10rem & 高さ: 10rem

しかし、実際には、幅: 120px (幅: 10rem) && 高さ: 120px (高さ: rem) でした

。一体どうしてそんなことが可能なのか、私は完全に混乱していました。 。 。 。 。

フォントサイズには問題がないのに、幅と高さが機能しないのはなぜですか? 。 。 。 。

理由は先ほども触れたようにchromeの最小フォントサイズが12pxだからです。 。

HTMLでフォントサイズを62.5%に設定しました。(= 10px)実際の値は=12pxです

理由がわかったので、次のように設定できます

62.5% * 12を入れます

次に変更します元の値を一律に2で割ります

例

html{

font-size:125%;

}

div{

font-size: 0.8rem; /*Real value: 16px; 16/10 /2=0.8*/

width: 5rem; /*実際の値: 100px 100/10/2=5*/

}

算術演算の場合はどうすればよいですか良くありません

us 変換するには 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 中国語 Web サイトの他の関連記事を参照してください。