Cara menggunakan unit CSS Viewport vh dan vw untuk menyesuaikan reka letak pada ketinggian skrin yang berbeza

Cara menggunakan unit CSS Viewport vh dan vw untuk melaksanakan reka letak yang menyesuaikan diri dengan ketinggian skrin yang berbeza

Dengan populariti peranti mudah alih, banyak laman web dan aplikasi Program ini perlu dipaparkan dengan baik pada ketinggian skrin yang berbeza. CSS menyediakan julat unit, yang mana unit vh (ketinggian viewport) dan vw (lebar viewport) sesuai untuk menyesuaikan reka letak pada ketinggian skrin yang berbeza. Artikel ini memperincikan cara menggunakan kedua-dua unit ini dan menyediakan contoh kod khusus.

Pertama, mari kita fahami cara kedua-dua unit ini berfungsi:

• vh (ketinggian viewport): Unit ini mewakili peratusan ketinggian viewport . 1vh adalah bersamaan dengan 1% daripada ketinggian viewport.
• vw (lebar port pandangan): Unit ini mewakili peratusan lebar port pandangan. 1vw adalah sama dengan 1% daripada lebar viewport.

Seterusnya, kami akan menggunakan kedua-dua unit ini untuk melaksanakan reka letak yang menyesuaikan diri dengan ketinggian skrin yang berbeza.

1. Tetapkan ketinggian elemen menggunakan unit vh:
   Kita boleh menetapkan ketinggian elemen menggunakan unit vh supaya saiznya diubah secara automatik berdasarkan ketinggian viewport. Sebagai contoh, kita boleh menetapkan ketinggian elemen div kepada 50% daripada ketinggian skrin:

div {
  height: 50vh;
}

Dengan cara ini, apabila elemen div diletakkan pada skrin dengan ketinggian yang berbeza, ketinggiannya Akan menyesuaikan dengan sewajarnya.

2. Gunakan unit vh untuk pemusatan menegak:
   Kita juga boleh menggunakan unit vh untuk mencapai pemusatan menegak elemen. Kesan ini boleh dicapai dengan mudah menggunakan gabungan unit vh dan susun atur flexbox. Sebagai contoh, kod berikut memusatkan elemen secara menegak: Berpusat secara menegak. Lebar elemen anak ditetapkan kepada 50% daripada lebar ruang pandang.

Tetapkan saiz fon menggunakan unit vw:

Cara praktikal lain untuk menggunakan unit vw ialah menetapkan saiz fon. Dengan menetapkan saiz fon sebagai peratusan lebar port pandangan, kami memastikan bahawa fon mempunyai saiz yang konsisten merentas skrin yang berbeza. Berikut ialah contoh:

3. .container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
   }
   
   .element {
     width: 50%;
   }

   
   Di sini, saiz fon elemen h1 akan dilaraskan secara automatik mengikut lebar viewport. Pada skrin yang lebih kecil, saiz fon akan dikurangkan, dan pada skrin yang lebih besar, saiz fon akan menjadi lebih besar.

Ringkasan:

Menggunakan unit port pandangan CSS vh dan vw, kami boleh dengan mudah melaksanakan reka letak yang menyesuaikan diri dengan ketinggian skrin yang berbeza. Dengan menetapkan ketinggian elemen, saiz fon dan menggunakan teknik reka letak seperti flexbox, kami boleh memastikan tapak web dan apl kami dipaparkan dengan baik pada peranti yang berbeza. Ciri dan fleksibiliti unit ini menjadikannya alat yang berkuasa untuk reka bentuk responsif.

Saya harap artikel ini dapat membantu anda memahami cara menggunakan unit port pandangan CSS vh dan vw untuk melaksanakan reka letak yang menyesuaikan diri dengan ketinggian skrin yang berbeza. Dengan menggunakan unit ini, anda boleh membuat reka bentuk web yang unik dan elegan dengan mudah yang berfungsi pada pelbagai peranti.

Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport vh dan vw untuk menyesuaikan reka letak pada ketinggian skrin yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!