Petua pengoptimuman sifat unit CSS: em, rem, px dan vw/vh-tutorial css-php.cn

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

WBOY

Lepaskan： 2023-10-20 12:54:31

asal

664 orang telah melayarinya

CSS 单位属性优化技巧：em，rem，px 和 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;
}

Salin selepas log masuk

rem Unit:

rem Unit dikira relatif kepada saiz fon elemen akar. Unsur akar selalunya ialah unsur <html>. 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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!