Rumah >hujung hadapan web >tutorial css >Apakah perbezaan antara rem dan em dalam CSS?
Apakah perbezaan antara rem dan em dalam CSS?
- Patricia Arquetteasal
- 2024-11-05 13:28:02789semak imbas
Membezakan rem daripada em dalam CSS
Dalam CSS, saiz fon boleh ditakrifkan menggunakan pelbagai unit, antaranya rem dan em biasa ditemui . Walaupun kedua-dua unit berfungsi untuk menetapkan saiz fon relatif, ia berbeza dalam aspek penting: titik rujukan relatifnya.
Memahami em
Unit em adalah relatif kepada saiz fon unsur induknya. Ini bermakna jika elemen induk mempunyai saiz fon 14px, elemen anak dengan saiz fon 1.4em akan mempunyai saiz fon 1.4 * 14px = 19.6px.
Memahami rem
Sebaliknya, unit rem adalah relatif kepada saiz fon asas. Saiz fon asas ini biasanya ditetapkan dalam elemen atau melalui pembolehubah CSS. Jika saiz fon asas ditetapkan kepada 16px, semua nilai rem akan dikira relatif kepada saiz tersebut. Oleh itu, elemen anak dengan saiz fon 1.4rem dalam contoh kami akan mempunyai saiz fon 1.4 * 16px = 22.4px.
Kesan pada elemen bersarang
Perbezaan ini menjadi ketara apabila berurusan dengan bekas bersarang yang menukar saiz fonnya. Elemen anak yang ditakrifkan dalam ems akan mewarisi saiz fon yang diubah daripada induknya, manakala elemen yang ditakrifkan dalam rem akan mengekalkan saiz relatifnya kepada saiz fon asas.
Contoh
Dalam coretan kod yang disediakan:
<code class="html"><div>Hello <p>World</p></div></code>
<code class="css">div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}</code>
Saiz fon
elemen dalam
Jika kita menukar saiz fon
elemen akan meningkat kepada 28px, kerana ia dikira sebagai 1.4 * 20px. Walau bagaimanapun,
Atas ialah kandungan terperinci Apakah perbezaan antara rem dan em dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!