Apakah unit saiz css?

Terdapat banyak jenis unit saiz dalam CSS, dan setiap unit mempunyai senario dan kegunaannya yang berkenaan. Berikut akan memperkenalkan unit saiz CSS yang biasa digunakan secara terperinci dan memberikan contoh kod yang sepadan.

1. Piksel (px)
   Piksel ialah salah satu unit saiz yang paling biasa digunakan. Ia diukur secara relatif kepada piksel fizikal skrin dan mempunyai saiz tetap. Apabila menulis gaya CSS, anda boleh terus menggunakan piksel sebagai nilai untuk atribut seperti lebar, tinggi, sempadan dan jidar dalam dan luar. Contohnya:

   div {
     width: 200px;
     height: 100px;
     border: 1px solid #000;
     padding: 10px;
     margin: 20px;
   }

2. Peratus (%)
   Peratus ialah unit ukuran relatif kepada saiz elemen induk. Ia boleh digunakan untuk atribut seperti lebar, tinggi, jidar dalam dan luar serta sempadan. Dengan menetapkan peratusan, anda boleh mencapai reka letak responsif. Contohnya:

   div {
     width: 50%;
     height: 50%;
   }

3. em
   em ialah unit ukuran relatif kepada saiz fon elemen semasa. Jika saiz fon tidak ditetapkan secara eksplisit, saiz dalam unit em adalah sama dengan saiz fon elemen induk. Ia boleh digunakan untuk atribut seperti lebar, tinggi, jidar dalam dan luar serta sempadan. Contohnya:

   div {
     width: 2em;
     height: 2em;
     padding: 1em;
     border: 0.5em solid #000;
   }

4. rem
   rem ialah unit ukuran relatif kepada saiz fon unsur akar (iaitu elemen html). Ia boleh digunakan untuk atribut seperti lebar, tinggi, jidar dalam dan luar serta sempadan. Kawalan saiz global boleh dicapai dengan menetapkan saiz fon elemen akar. Contohnya:

   html {
     font-size: 16px; /* 设置根元素的字体大小为16px */
   }
   div {
     width: 20rem;
     height: 10rem;
     padding: 4rem;
     border: 2rem solid #000;
   }

5. vw dan vh
   vw ialah peratusan lebar port pandangan dan vh ialah peratusan ketinggian port pandangan. Ia diukur secara relatif kepada dimensi port pandangan penyemak imbas. Ia boleh digunakan untuk sifat seperti lebar, tinggi, dll. Dengan menetapkan vw dan vh, susun atur responsif boleh dicapai. Contohnya:

   div {
     width: 50vw; /* 视口宽度的50% */
     height: 50vh; /* 视口高度的50% */
   }

Ringkasan:
Artikel ini memperkenalkan unit saiz yang biasa digunakan dalam CSS, termasuk piksel, peratusan, em, rem, vw dan vh. Pemilihan dan penggunaan unit saiz yang munasabah boleh menjadikan halaman web boleh disesuaikan dan responsif. Dalam pembangunan sebenar, memilih unit yang sesuai untuk tetapan mengikut keperluan dan senario tertentu boleh menjadikan reka letak halaman lebih fleksibel dan cantik.

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