Pelbagai Jenis Unit Relatif CSS

Terdapat banyak jenis unit relatif dalam CSS, setiap satunya mempunyai senario dan ciri yang berkenaan. Unit relatif yang biasa digunakan diperkenalkan di bawah dan beberapa contoh kod khusus disediakan.

1. em
   em ialah unit yang dikira relatif kepada saiz fon elemen semasa. Sebagai contoh, jika saiz fon elemen ialah 16px, maka 1em adalah bersamaan dengan 16px. Jika saiz fon elemen ialah 2em, maka saiz fonnya adalah dua kali ganda saiz fon elemen induk.

p {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相当于8px */
}

2. rem
   rem ialah unit yang dikira relatif kepada saiz saiz fon unsur akar (iaitu, elemen html). Ia digunakan dengan cara yang serupa dengan em, tetapi tidak akan terjejas oleh elemen induk.

html {
  font-size: 16px;
}

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

3. vw/vh
   vw dan vh ialah unit berbanding dengan lebar port pandangan dan ketinggian port pandangan. 1vw adalah sama dengan 1% daripada lebar tingkap, dan 1vh adalah sama dengan 1% daripada ketinggian tingkap. Unit ini sering digunakan dalam reka bentuk responsif untuk mengubah saiz elemen secara automatik berdasarkan saiz port pandangan.

div {
  width: 50vw; /* 相当于视窗宽度的50% */
  height: 30vh; /* 相当于视窗高度的30% */
}

4. %
   Peratusan unit dikira secara relatif kepada saiz elemen induk. Sebagai contoh, jika elemen mempunyai lebar 50%, lebarnya ialah separuh lebar elemen induknya.

.container {
  width: 200px;
}

div {
  width: 50%; /* 相当于100px */
}

5. ch
   ch ialah unit yang dikira berbanding dengan lebar fon semasa. A ch adalah sama dengan lebar aksara "0" dalam fon semasa.

p {
  font-size: 16px;
}

span {
  width: 10ch; /* 相当于160px */
}

Ringkasan:
Unit relatif menyediakan kaedah reka letak yang lebih fleksibel dan boleh disesuaikan dalam CSS. Pilih unit yang sesuai mengikut keperluan anda Anda boleh memilih unit relatif yang sesuai berdasarkan ciri-ciri elemen dan keperluan reka bentuk. Dengan menggunakan unit relatif secara rasional, kesan susun atur penyesuaian boleh dicapai.

Atas ialah kandungan terperinci Pelbagai Jenis Unit Relatif CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!