Panduan untuk sifat unit CSS: em, rem, px dan vw/vh

Panduan atribut unit CSS: em, rem, px dan vw/vh

Apabila menulis gaya CSS, adalah sangat penting untuk memilih atribut unit yang sesuai. Artikel ini akan memperkenalkan beberapa atribut unit yang biasa digunakan: em, rem, px dan vw/vh, dan memberikan contoh kod khusus.

1. em
   em (unit saiz fon) ialah unit relatif kepada saiz fon elemen induk. Jika saiz fon elemen induk ialah 16px, 1em adalah sama dengan 16px. Apabila em digunakan untuk atribut lain (seperti lebar, tinggi, dll.), ia juga merupakan nilai berkadar berbanding saiz fon elemen induk.

Contoh kod:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 等同于16px */
  width: 2em; /* 等同于32px */
  height: 3em; /* 等同于48px */
}

2. rem
   rem (unit saiz font elemen akar) ialah unit relatif kepada saiz fon elemen akar (biasanya elemen HTML). Tidak seperti em, asas rem ialah saiz fon unsur akar. Jika saiz fon unsur akar ialah 16px, 1rem adalah sama dengan 16px. rem sesuai untuk bahagian susun atur dan boleh melaraskan perkadaran keseluruhan halaman dengan mudah.

Contoh kod:

html {
  font-size: 16px;
}

.child {
  font-size: 1rem; /* 等同于16px */
  width: 2rem; /* 等同于32px */
  height: 3rem; /* 等同于48px */
}

3. px
   px (unit piksel) ialah unit yang paling biasa dan ia mempunyai panjang tetap. px sesuai untuk situasi di mana kawalan saiz yang tepat diperlukan.

Contoh kod:

.child {
  font-size: 16px;
  width: 32px;
  height: 48px;
}

4. vw/vh
   vw (unit lebar viewport) dan vh (unit ketinggian viewport) adalah unit relatif kepada lebar viewport dan ketinggian viewport. Viewport merujuk kepada lebar dan ketinggian kawasan pelayar yang boleh dilihat. vw mewakili peratusan lebar viewport, dan vh mewakili peratusan ketinggian viewport. Gunakan unit vw/vh untuk mengubah saiz elemen secara automatik berdasarkan saiz tetingkap penyemak imbas.

Contoh kod:

.child {
  font-size: 5vw; /* 视口宽度的5% */
  width: 30vw; /* 视口宽度的30% */
  height: 40vh; /* 视口高度的40% */
}

Ringkasan:
Memilih atribut unit yang sesuai adalah sangat penting untuk menulis gaya CSS yang fleksibel dan boleh disesuaikan dengan skrin yang berbeza. em dan rem sesuai untuk saiz relatif, px sesuai untuk saiz tetap, dan vw/vh sesuai untuk saiz penyesuaian. Memilih atribut unit yang sesuai mengikut situasi tertentu boleh menjadikan paparan halaman web lebih baik pada peranti dan skrin yang berbeza.

Di atas adalah panduan tentang sifat unit CSS, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Panduan untuk sifat unit CSS: em, rem, px dan vw/vh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!