Cara menggunakan unit CSS Viewport vh untuk mencipta reka letak halaman web yang menyesuaikan diri dengan skrin mudah alih

Cara menggunakan CSS Viewport unit vh untuk mencipta reka letak halaman web yang menyesuaikan diri dengan skrin mudah alih

Kepopularan dan penggunaan peranti mudah alih semakin meluas semakin banyak halaman web perlu disesuaikan dengan skrin mudah alih. Untuk menyelesaikan masalah ini, CSS3 memperkenalkan unit baharu - unit Viewport, yang termasuk vh (tinggi viewport). Dalam artikel ini, kami akan meneroka cara menggunakan unit vh untuk membuat reka letak halaman web yang menyesuaikan diri dengan skrin mudah alih dan memberikan contoh kod khusus.

1. Unit Viewport vh Pengenalan
Viewport merujuk kepada kawasan di mana halaman web memaparkan kandungan dalam tetingkap penyemak imbas adalah unit berdasarkan ketinggian Viewport. Nilai vh ialah peratusan berbanding ketinggian Viewport dan 1vh adalah bersamaan dengan 1% ketinggian Viewport. Contohnya, jika ketinggian Viewport ialah 800 piksel, maka 1vh bersamaan dengan 8 piksel.

2. Buat susun atur halaman web yang disesuaikan dengan skrin telefon bimbit
Menggunakan unit vh, anda boleh dengan mudah membuat susun atur halaman web yang disesuaikan dengan skrin telefon mudah alih diperkenalkan di bawah.

1. Susun atur skrin penuh
   Reka letak skrin penuh bermakna kandungan web dipaparkan pada keseluruhan skrin telefon mudah alih tanpa meninggalkan sebarang tepi putih. Ini boleh dicapai dengan menetapkan ketinggian elemen html dan badan kepada 100vh:

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

2. Susun atur tengah menegak
   Susun atur tengah menegak bermakna kandungan dipaparkan menegak di tengah pada skrin telefon bimbit . Anda boleh mencapai pemusatan menegak dengan menetapkan ketinggian bekas induk kepada 100vh dan menggunakan susun atur fleksibel:

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

3. Top tetap susun atur
   Top tetap susun atur merujuk kepada bahagian atas halaman web Kandungan ditetapkan pada bahagian atas skrin telefon dan tidak menatal dengan bar skrol. Ini boleh dicapai dengan menetapkan ketinggian kawasan kandungan kepada 100vh dan menggunakan kedudukan tetap:

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

4. Suai letak gambar
   Dalam pengeluaran halaman web, ia adalah selalunya diperlukan untuk menggunakan telefon bimbit Gambar penyesuaian dipaparkan pada skrin. Anda boleh menggunakan unit vh untuk menetapkan ketinggian dan lebar imej kepada bahagian tertentu Viewport Contohnya, tetapkan ketinggian imej kepada 50vh dan lebar kepada 50vh untuk mencapai susun atur imej penyesuaian:
#. 🎜🎜#

img {
  height: 50vh;
  width: 50vh;
}

三, Ringkasan

Dengan menggunakan unit CSS Viewport vh, kami boleh membuat reka letak halaman web yang disesuaikan dengan skrin mudah alih dengan mudah. Artikel ini memperkenalkan beberapa kaedah reka letak biasa, termasuk reka letak skrin penuh, susun atur berpusat menegak, susun atur tetap atas dan susun atur imej adaptif dan menyediakan contoh kod khusus. Saya harap artikel ini dapat membantu pembaca menyesuaikan diri dengan lebih baik pada skrin mudah alih dan meningkatkan pengalaman pengguna halaman web.


Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport vh untuk mencipta reka letak halaman web yang menyesuaikan diri dengan skrin mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!