Apakah unit ukuran css?

Unit ukuran CSS digunakan untuk menentukan saiz, jarak, sempadan dan atribut elemen lain, dan boleh dibahagikan kepada unit mutlak dan unit relatif. Unit mutlak termasuk piksel, inci, sentimeter, milimeter dan titik Unit relatif termasuk peratusan, lebar tetingkap, tinggi tetingkap, lebar minimum tetingkap, lebar maksimum tetingkap dan unit relatif fon. Memilih unit ukuran yang sesuai boleh menjadikan halaman boleh disesuaikan dan responsif, sambil mengambil kira ciri dan keserasian unit yang berbeza.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Terdapat banyak unit ukuran dalam CSS, yang digunakan untuk menentukan saiz, jarak, sempadan dan atribut elemen lain. Unit ukuran ini boleh dibahagikan kepada dua kategori: unit mutlak dan unit relatif.

1. Unit mutlak:

- Piksel (Pixel, px): Piksel ialah unit mutlak yang paling biasa digunakan, yang mewakili titik pada skrin. Piksel tetap dan tidak berubah berdasarkan saiz skrin. Sebagai contoh, lebar: 200px bermaksud lebar elemen ialah 200 piksel.

- Inci (in): Inci ialah unit fizikal, menunjukkan bahawa 1 inci bersamaan dengan 2.54 sentimeter. Sebagai contoh, lebar: 2in bermaksud elemen adalah 2 inci lebar.

- Sentimeter (cm): Sentimeter ialah unit fizikal, menunjukkan bahawa 1 sentimeter bersamaan dengan 0.3937 inci. Sebagai contoh, lebar: 5cm bermakna lebar unsur ialah 5 cm.

- Milimeter (mm): Milimeter ialah unit fizikal, menunjukkan bahawa 1 milimeter bersamaan dengan 0.03937 inci. Sebagai contoh, lebar: 50mm bermakna lebar elemen ialah 50 mm.

- Titik (Titik, pt): Titik ialah unit fizikal, menunjukkan bahawa 1 mata bersamaan dengan 1/72 inci. Sebagai contoh, saiz fon: 12pt bermakna saiz fon ialah 12 mata.

2. Unit relatif:

- Peratusan (%): Peratusan ialah unit ukuran relatif kepada elemen induk. Sebagai contoh, lebar: 50% bermakna lebar elemen ialah 50% daripada lebar elemen induk.

- Lebar Viewport (vw): Lebar viewport ialah unit ukuran relatif kepada lebar tetingkap penyemak imbas. Sebagai contoh, lebar: 50vw bermakna lebar elemen ialah 50% daripada lebar tetingkap penyemak imbas.

- Ketinggian Viewport (vh): Ketinggian viewport ialah unit ukuran relatif kepada ketinggian tetingkap penyemak imbas. Sebagai contoh, ketinggian: 50vh bermakna ketinggian elemen ialah 50% daripada ketinggian tetingkap penyemak imbas.

- Lebar Minimum Viewport (vmin): Lebar minimum viewport ialah unit ukuran berbanding dengan lebar dan ketinggian tetingkap penyemak imbas yang lebih kecil. Sebagai contoh, lebar: 50vmin bermaksud lebar elemen ialah 50% daripada lebar dan ketinggian tetingkap pelayar yang lebih kecil.

- Lebar Maksimum Viewport (vmax): Lebar maksimum viewport ialah unit ukuran relatif kepada lebar dan ketinggian tetingkap penyemak imbas yang lebih besar. Sebagai contoh, lebar: 50vmax bermakna lebar elemen ialah 50% daripada lebar dan ketinggian tetingkap penyemak imbas yang lebih besar.

- Unit Relatif Fon: termasuk unit relatif seperti em, rem dan ch, digunakan untuk menentukan ukuran berkaitan fon. em ialah saiz fon berbanding elemen induk, rem ialah saiz fon berbanding elemen akar (iaitu elemen html), dan ch ialah lebar berbanding 0 aksara.

Memilih unit ukuran yang sesuai boleh menjadikan halaman kelihatan konsisten pada peranti yang berbeza dan responsif. Apabila memilih unit ukuran, faktor seperti saiz, susun atur dan ruang yang tersedia bagi elemen perlu dipertimbangkan berdasarkan keperluan sebenar dan keperluan reka bentuk. Pada masa yang sama, anda juga perlu memberi perhatian kepada ciri dan keserasian unit ukuran yang berbeza untuk memastikan ketekalan dan kebolehpercayaan gaya merentas pelayar dan peranti yang berbeza.

Untuk meringkaskan, CSS menyediakan pelbagai unit ukuran, termasuk unit mutlak (piksel, inci, sentimeter, milimeter, mata) dan unit relatif (peratusan, lebar tetingkap, tinggi tetingkap, lebar minimum tetingkap, lebar maksimum tetingkap, unit relatif fon ). Memilih unit ukuran yang betul boleh menjadikan halaman boleh disesuaikan dan responsif, sambil mengambil kira ciri dan keserasian unit yang berbeza.

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