Petua pengoptimuman sifat unit CSS: em, rem, px dan vw/vh

Petua pengoptimuman atribut unit CSS: em, rem, px dan vw/vh

Pengenalan:
dalam reka bentuk dan pembangunan web , sifat unit CSS memainkan peranan yang sangat penting. Pemilihan dan penggunaan atribut unit yang sesuai boleh menjadikan paparan halaman lebih cantik dan konsisten pada peranti dan saiz skrin yang berbeza. Artikel ini akan memperkenalkan beberapa sifat unit CSS yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca menguasai teknik pengoptimuman ini dengan lebih baik.

em Unit:

em Unit dikira relatif kepada saiz fon elemen induk. Contohnya, jika saiz fon elemen induk ditetapkan kepada 16px, maka menetapkan saiz fon elemen kepada 2em akan menyebabkan saiz fonnya ialah 32px.

.parent {
  font-size: 16px;
}

.child {
  font-size: 2em;
}

rem Unit:

rem Unit dikira relatif kepada saiz fon elemen akar. Unsur akar selalunya ialah unsur 100db36a723c770d327fc0aef2ce13b1. Unit rem adalah lebih mudah untuk dikira daripada unit em. Jika saiz fon elemen akar ditetapkan kepada 16px dan saiz fon elemen ialah 2rem, saiz fonnya juga akan menjadi 32px.

html {
  font-size: 16px;
}

.child {
  font-size: 2rem;
}

unit px:

unit px ialah unit tetap dan tidak dipengaruhi oleh unsur lain. Tetapkan saiz fon elemen kepada 16px dan saiz fonnya akan sentiasa kekal 16px.

.child {
  font-size: 16px;
}

vw/vh unit:

vw unit ialah peratusan berbanding lebar viewport, 1vw bersamaan dengan 1% lebar viewport dan unit vh adalah relatif kepada port pandangan Peratusan ketinggian, 1vh adalah sama dengan 1% ketinggian port pandangan. Kedua-dua unit ini sangat berguna, terutamanya dalam reka bentuk responsif.

.child {
  font-size: 5vw;
}

Dalam kod di atas, jika lebar viewport ialah 1000px, saiz fon elemen ini ialah 50px.

Kesimpulan:
Apabila memilih dan menggunakan sifat unit CSS, anda perlu membuat pilihan berdasarkan keperluan dan senario yang berbeza. Unit em dan rem adalah untuk tetapan saiz relatif, manakala unit px adalah untuk saiz piksel tetap. unit vw/vh menyesuaikan dengan baik kepada saiz skrin dan saiz port pandangan yang berbeza.

Petua tambahan: Ini hanyalah contoh pengenalan yang mudah Dalam penggunaan sebenar, ia perlu dilaraskan dan dioptimumkan mengikut situasi tertentu.

Atas ialah kandungan terperinci Petua pengoptimuman sifat unit CSS: em, rem, px dan vw/vh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!