Apakah Perbezaan Utama Antara rem dan em dalam CSS?

CSS: Perbezaan Antara Rem dan Em

Dalam CSS, pembangun sering menggunakan pelbagai unit untuk menentukan saiz elemen teks. Dua unit yang biasa digunakan ialah rem dan em. Walaupun kedua-dua unit adalah serupa, ia berbeza dengan cara yang penting.

Memahami Unit Rem

Unit rem, singkatan dari root em, adalah relatif kepada fon akar saiz laman web. Ini bermakna saiz elemen menggunakan rem akan kekal malar tanpa mengira perubahan saiz fon dalam bekas perantaraan.

Memahami Unit Em

Berbeza dengan rem, unit em adalah relatif kepada saiz fon elemen induk. Apabila saiz fon elemen induk berubah, saiz elemen yang menggunakan em juga akan dilaraskan dengan sewajarnya.

Demonstrasi

Dalam kod CSS berikut:

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

Elemen div diberikan saiz fon 1.4rem, manakala elemen p dalam div juga diberikan saiz fon 1.4rem. Jika anda menambah saiz fon elemen div, saiz fon elemen p tidak akan berubah kerana ia ditakrifkan menggunakan rem, yang relatif kepada saiz fon akar.

Sebaliknya, jika anda untuk menggunakan em dan bukannya rem, saiz fon elemen p juga akan meningkat apabila anda meningkatkan saiz fon elemen div. Ini kerana ia adalah relatif kepada saiz fon elemen induk.

Atas ialah kandungan terperinci Apakah Perbezaan Utama Antara rem dan em dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!