Apakah unit relatif dalam css

CSS mempunyai banyak unit relatif, yang biasa ialah piksel (px), peratusan (%), em (em) dan rem (rem). Empat unit relatif ini akan diperkenalkan di bawah dan contoh kod khusus akan diberikan.

1. Pixel (px):
   Pixel ialah unit berbanding dengan resolusi skrin. Nilainya tetap dan tidak akan berubah mengikut tetapan pengguna. Sebagai contoh, jika anda menetapkan lebar elemen kepada 100px, lebarnya akan kekal 100 piksel.

Contoh kod:

div {
  width: 100px;
  height: 50px;
}

2. Peratusan (%):
   Peratusan ialah unit relatif kepada elemen induk dan nilainya akan berubah berdasarkan saiz elemen induk. Dalam erti kata lain, unit peratusan boleh melaraskan saiz elemen secara automatik mengikut perubahan dalam saiz skrin. Sebagai contoh, jika lebar elemen induk ialah 200px dan anda menetapkan lebar elemen anak kepada 50%, maka elemen anak akan menduduki separuh daripada lebar elemen induk.

Contoh kod:

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

3. em (em):
   em ialah unit berbanding saiz fon elemen itu sendiri. Contohnya, jika saiz fon elemen ialah 16px, maka 1em bersamaan dengan 16px, 2em bersamaan dengan 32px dan seterusnya. Unit em boleh dengan mudah merealisasikan pelarasan relatif saiz fon.

Contoh kod:

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

4. rem (rem):
   rem serupa dengan em, tetapi ia adalah saiz fon berbanding elemen akar (biasanya merujuk kepada elemen html). Unit rem boleh mengawal saiz fon secara seragam di seluruh halaman, sambil juga membolehkan pelarasan relatif.

Contoh kod:

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

Ringkasan:
Unit relatif dalam CSS ialah piksel (px), peratusan (%), em (em) dan rem (rem). Unit piksel ditetapkan dan tidak akan berubah berdasarkan tetapan pengguna. Peratusan unit berubah berbanding saiz elemen induk. Unit em ialah unit relatif kepada saiz fon elemen itu sendiri, manakala unit rem ialah unit relatif kepada saiz fon elemen akar. Dalam aplikasi praktikal, kita boleh memilih unit relatif yang sesuai untuk mengawal saiz elemen dan saiz fon mengikut keperluan.

Atas ialah kandungan terperinci Apakah unit relatif dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!