Unit Em dan Rem dalam CSS?-tutorial css-php.cn

Unit Em dan Rem dalam CSS?

PHPz

Lepaskan： 2023-08-27 13:13:10

ke hadapan

789 orang telah melayarinya

CSS 中的 Em 与 Rem 单位？

Apabila menetapkan saiz elemen menggunakan sifat CSS, anda mungkin melihat dua pilihan, satu unit mutlak dan satu lagi unit relatif. Unit mutlak adalah sama dan tetap, dan anda boleh menggunakan cm, mm dan px untuk menetapkan saiz. Unit relatif, sebaliknya, adalah relatif kepada sesuatu yang lain, yang boleh menjadi elemen induk atau mana-mana elemen lain.

Dalam tutorial ini, kita akan melihat perbandingan antara unit em dan rem dalam CSS.

Unit Em

Unit

em membolehkan anda menukar saiz elemen berbanding saiz fon elemen induknya. Ini bermakna jika saiz elemen induk berubah, saiz elemen anak juga akan berubah.

Mari kita lihat contoh untuk memahami apa yang unit em lakukan.

Contoh

Dalam contoh ini, kami akan menukar saiz fon elemen kanak-kanak kepada 35px. Jidar unsur kanak-kanak juga akan ditukar kepada 50px.

Di sini, kami mula-mula mencipta elemen induk dan kemudian menetapkan saiznya kepada 17.5 piksel dan saiz fon elemen kanak-kanak kepada 1em, yang bermaksud saiz fon elemen kanak-kanak akan menjadi dua kali ganda daripada elemen induk dan jidar elemen akan kekal tidak berubah. Mari kita lihat output kod tersebut.

Nota − Penggunaan sifat saiz fon adalah relatif kepada elemen bapa (ibu bapa) apabila ia digunakan pada sifat lain.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Difference between em and rem</title>
   <style>
      .father {
         paddding: 0px;
         font-size: 16px;
      }
      .son {
         margin: 1em;
         font-size: 1em;
      }
   </style>
</head>
<body>
   <div class="father">
      This is the Father element
      <div class="son">
         This is Son element
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam output di atas, terdapat elemen induk dan elemen anak. Dalam output, elemen anak adalah saiz yang sama dengan elemen induk

unit rem

Rem unit ialah saiz fon berbanding dengan punca elemen, iaitu elemen html. Jika tidak menyatakan saiz fon, nilai lalai penyemak imbas digunakan, tanpa mengira elemen induk, hanya elemen akar.

Contoh

Kami akan mengekalkan saiz fon elemen anak kepada 50px dan kemudian menetapkan margin elemen kepada 40px Saiz unit rem adalah relatif untuk semua pengisytiharan tidak seperti em.

Dalam contoh berikut, kami mula-mula menggunakan elemen akar dan kemudian mencipta elemen induk dan elemen anak Kami kemudian menetapkan saiz fon elemen akar kepada 18px dan saiz fon induk kepada 15px fon elemen anak kemudiannya ditetapkan kepada 1.5rem yang bermaksud dua kali ganda saiz elemen akar dan bukan elemen induk Mari lihat output untuk melihat apa yang dilakukan oleh unit rem.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>The difference between em and rem units</title>
   <style>
      html {
         font-size: 18px;
      }
      .son {
         font-size: 2rem;
         margin: 1.5rem;
      }
      .father {
         font-size: 13px;
      }
   </style>
</head>
<body>
   <div class="father">
      This is parent
      <div class="son">
         This is Child in rem unit system
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Anda boleh lihat dalam output di atas bahawa elemen anak bukanlah gandaan unsur induk tetapi ia adalah gandaan unsur akar.

Unit em, adalah relatif kepada saiz fon induknya yang terdekat dan ia boleh membawa kepada kesan pengkompaunan, adalah relatif kepada saiz fon akar HTML tetapi ia tidak membawa kepada kesan pengkompaunan.

Unit Em dan Rem dalam CSS

Unit termasuk em, vh, vw, dan rem Unit relatif juga dikenali sebagai unit boleh skala dan memainkan peranan penting dalam responsif tapak web relatif kepada saiz fon elemen induk dalam dokumen HTML dan unit rem, adalah relatif kepada akar fon keseluruhan dokumen.

Kesimpulan

Perbezaan antara unit em dan unit rem ialah unit em dikira secara relatif kepada elemen induk, manakala unit rem dikira secara relatif kepada elemen akar kedua-dua unit adalah unit relatif dan ia membantu membuat reka letak Responsif tapak web. Unit ini membantu menetapkan saiz elemen tertentu.

Atas ialah kandungan terperinci Unit Em dan Rem dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!