Mendedahkan unit biasa susun atur CSS: Mana yang perlu anda kuasai?

Unit Reka Letak CSS Didedahkan: Apa yang anda perlu tahu?

Unit susun atur CSS ialah bahagian penting dalam reka bentuk web Ia digunakan untuk menentukan saiz, jarak dan kedudukan elemen. Terdapat banyak unit berbeza untuk dipilih dalam CSS, masing-masing mempunyai ciri dan kegunaan tersendiri. Dalam artikel ini, kami akan membongkar beberapa unit susun atur CSS yang paling biasa digunakan dan penting serta memberikan contoh kod khusus untuk membantu anda memahami dan menerapkannya dengan lebih baik.

1. Pixel (px)
   Pixel ialah salah satu unit yang paling biasa digunakan, ia mewakili piksel pada skrin. Apabila menetapkan saiz elemen dalam CSS, anda biasanya menggunakan piksel sebagai unit. Sebagai contoh, anda boleh menggunakan kod berikut untuk menetapkan lebar elemen div kepada 200 piksel:

div {
  width: 200px;
}

Unit piksel sangat tepat dalam menentukan saiz dan kedudukan elemen, dan kesan paparan hampir konsisten merentas peranti yang berbeza. Walau bagaimanapun, menggunakan unit piksel juga mempunyai beberapa kelemahan. Apabila pengguna menyemak imbas halaman web pada skrin resolusi tinggi, unit piksel boleh menyebabkan unsur kelihatan terlalu kecil.

2. Peratus (%)
   Unit peratusan adalah relatif kepada saiz elemen induk. Sebagai contoh, jika lebar elemen div ditetapkan kepada 50%, lebarnya ialah separuh lebar elemen induknya. Kod di bawah menunjukkan cara menetapkan lebar elemen menggunakan unit peratusan:

div {
  width: 50%;
}

Unit peratus bagus untuk reka letak responsif kerana ia boleh mengubah saiz elemen secara automatik berdasarkan saiz skrin peranti berbeza. Walau bagaimanapun, unit peratusan mungkin tidak berfungsi dengan betul apabila elemen induk elemen tidak mempunyai lebar yang ditentukan.

3. em
   em unit dikira relatif kepada saiz fon elemen semasa. Jika saiz fon elemen ditetapkan kepada 16px, maka 1em bersamaan dengan 16px. Sebagai contoh, kod berikut menetapkan saiz fon elemen perenggan kepada 1.2em, yang bersamaan dengan 1.2 kali saiz fon elemen induk:

p {
  font-size: 1.2em;
}

em unit bagus untuk menetapkan saiz dan jarak elemen, terutamanya apabila mereka bentuk jam susun atur responsif. Kerana ia boleh mengubah saiz elemen secara automatik berdasarkan perubahan saiz fon. Walau bagaimanapun, apabila tahap bersarang sangat dalam, unit em boleh menjadi rumit dan sukar untuk difahami.

4. rem
   unit rem dikira relatif kepada saiz fon unsur akar (biasanya elemen HTML). Tidak seperti unit em, unit rem tidak terjejas oleh tahap bersarang. Sebagai contoh, kod berikut menetapkan saiz fon elemen tajuk kepada 2rem, yang bersamaan dengan 2 kali saiz fon elemen akar:

h1 {
  font-size: 2rem;
}

unit rem bagus untuk reka letak responsif kerana ia bertindak balas secara automatik kepada perubahan dalam saiz fon elemen akar Ubah saiz elemen. Walau bagaimanapun, sokongannya dalam pelayar lama mungkin tidak begitu baik.

5. vw dan vh
   vw dan vh ialah unit berbanding dengan lebar port pandangan dan ketinggian port pandangan. 1vw adalah bersamaan dengan 1% daripada lebar viewport, dan 1vh bersamaan dengan 1% daripada ketinggian viewport. Kod di bawah menunjukkan cara menetapkan saiz elemen menggunakan unit vw dan vh:

div {
  width: 50vw;
  height: 50vh;
}

Unit vw dan vh sangat bagus untuk mencipta reka letak responsif kerana ia secara automatik mengubah saiz elemen berdasarkan saiz port pandangan peranti berbeza. Walau bagaimanapun, menggunakan unit vw dan vh dalam beberapa kes boleh menyebabkan unsur kelihatan terlalu besar atau terlalu kecil.

Ringkasnya, terdapat banyak jenis unit susun atur CSS, masing-masing mempunyai ciri dan kegunaan tersendiri. Apabila memilih unit susun atur, anda perlu membuat keputusan berdasarkan situasi tertentu. Jika anda memerlukan kawalan tepat ke atas saiz dan kedudukan elemen, anda boleh menggunakan unit piksel jika anda ingin mencapai reka letak responsif, anda boleh menggunakan unit peratusan, em, rem atau vw/vh. Dengan menggunakan unit ini secara fleksibel, anda boleh membuat reka letak web yang cantik dan responsif.

Saya harap artikel ini akan membantu anda memahami dan menggunakan unit susun atur CSS. Melalui pembelajaran dan latihan, anda akan dapat menggunakan unit susun atur CSS dengan lebih fleksibel dan profesional untuk mencipta reka letak halaman web yang unik.

Atas ialah kandungan terperinci Mendedahkan unit biasa susun atur CSS: Mana yang perlu anda kuasai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!