Apakah unit relatif dalam css

Unit relatif dalam CSS termasuk peratusan, unit tetingkap, unit relatif fon dan unit panjang relatif, dsb. Pengenalan terperinci: 1. Peratus ialah unit ukuran relatif kepada elemen induk Dalam CSS, anda boleh menggunakan peratusan untuk menentukan saiz, jidar, padding dan atribut lain bagi elemen tersebut secara adaptif mengikut saiz elemen induk Saiz elemen 2. Unit tetingkap ialah unit ukuran relatif kepada port pandangan penyemak imbas, dan unit tetingkap boleh melaraskan saiz elemen mengikut saiz pelayar. tetingkap; 3. Unit relatif fon ialah unit relatif kepada saiz fon, dsb.

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

Dalam CSS, unit relatif ialah unit relatif kepada dimensi lain atau persekitaran, dan nilainya berubah bergantung pada konteks. Unit relatif membolehkan reka letak responsif dan menyesuaikan diri dengan saiz skrin yang berbeza. Berikut ialah unit relatif biasa dalam CSS:

1 Peratusan (%): Peratusan ialah unit ukuran relatif kepada elemen induk. Dalam CSS, anda boleh menggunakan peratusan untuk menentukan saiz, jidar, padding dan sifat elemen lain. Sebagai contoh, lebar: 50% bermakna lebar elemen ialah 50% daripada lebar elemen induk. Unit peratusan sangat biasa digunakan untuk menyesuaikan saiz semula elemen berdasarkan saiz elemen induknya.

2. Unit Viewport: Unit Viewport ialah unit ukuran relatif kepada viewport penyemak imbas. Unit viewport mengubah saiz elemen berdasarkan saiz tetingkap penyemak imbas. Unit tetingkap biasa ialah:

- Lebar Port Pandangan (vw): Unit lebar tetingkap mewakili peratusan berbanding lebar tetingkap penyemak imbas. Sebagai contoh, lebar: 50vw bermakna lebar elemen ialah 50% daripada lebar tetingkap penyemak imbas. Unit lebar viewport sangat bagus untuk mencipta reka letak responsif yang melaraskan lebar elemen secara automatik berdasarkan saiz tetingkap penyemak imbas.

- Ketinggian Viewport (vh): Unit ketinggian tetingkap mewakili peratusan berbanding ketinggian tetingkap penyemak imbas. Sebagai contoh, ketinggian: 50vh bermakna ketinggian elemen ialah 50% daripada ketinggian tetingkap penyemak imbas. Unit ketinggian viewport juga biasanya digunakan untuk membuat reka letak responsif yang melaraskan ketinggian elemen secara automatik berdasarkan saiz tetingkap penyemak imbas.

- Lebar Minimum Viewport (vmin): Unit lebar minimum port view mewakili peratusan berbanding 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. Unit lebar minimum port pandang memastikan elemen mengekalkan perkadaran yang betul merentas saiz skrin yang berbeza.

- Lebar Maksimum Viewport (vmax): Unit lebar maksimum port view mewakili peratusan berbanding 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 lebar maksimum port pandang memastikan elemen mengekalkan perkadaran yang betul merentas saiz skrin yang berbeza.

3. Unit Relatif Fon: Unit relatif fon ialah unit relatif kepada saiz fon. Unit relatif fon biasa ialah:

- em: Unit em ialah gandaan saiz fon berbanding elemen. Sebagai contoh, saiz fon: 1.2em bermaksud saiz fon ialah 1.2 kali saiz fon unsur induk. Unit em boleh digunakan untuk menentukan saiz, jarak, sempadan dan atribut elemen lain.

- rem: Unit rem ialah gandaan saiz fon berbanding elemen akar (iaitu, elemen html). Sebagai contoh, saiz fon: 1.5rem; bermakna saiz fon ialah 1.5 kali saiz fon unsur akar. unit rem boleh digunakan untuk melaksanakan saiz fon responsif di seluruh halaman.

4. Unit Panjang Relatif: Unit panjang relatif ialah unit relatif kepada nilai atribut tertentu bagi elemen itu sendiri. Unit panjang relatif biasa ialah:

- rem: Unit rem ialah gandaan saiz fon berbanding elemen akar (iaitu, elemen html). Dalam CSS, anda boleh menggunakan unit rem untuk menentukan saiz, jarak, sempadan dan atribut elemen lain. Unit rem selalunya digunakan untuk melaksanakan dimensi relatif keseluruhan halaman.

- em: Unit em ialah gandaan saiz fon berbanding elemen. Dalam CSS, anda boleh menggunakan unit em untuk menentukan saiz, jarak, sempadan dan atribut elemen lain. Unit em boleh melaraskan saiz elemen berdasarkan saiz fonnya sendiri.

Unit relatif ini boleh berubah mengikut perubahan dalam konteks, menjadikan halaman boleh disesuaikan dan responsif merentas peranti dan saiz skrin yang berbeza. Penggunaan unit relatif boleh membantu mencapai susun atur yang fleksibel dan reka bentuk penyesuaian.

Untuk meringkaskan, unit relatif biasa dalam CSS termasuk peratusan, unit tetingkap (vw, vh, vmin, vmax), unit relatif fon (em, rem) dan unit panjang relatif (rem, em). Unit ini boleh berubah bergantung pada konteks, membantu melaksanakan reka letak responsif dan menyesuaikan diri dengan saiz skrin yang berbeza. Apabila memilih unit, anda perlu memutuskan unit relatif yang hendak digunakan berdasarkan keperluan dan keperluan reka bentuk khusus anda.

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