CSS Viewport: Cara mencipta ketinggian skrin adaptif menggunakan vh dan vmax-tutorial css-php.cn

CSS Viewport: Cara mencipta ketinggian skrin adaptif menggunakan vh dan vmax

WBOY

Lepaskan： 2023-09-13 08:43:53

asal

1288 orang telah melayarinya

CSS Viewport: 使用 vh 和 vmax 创建自适应屏幕高度的方法

CSS Viewport: Cara mencipta ketinggian skrin adaptif menggunakan vh dan vmax

Dalam reka bentuk web moden, reka letak penyesuaian telah menjadi teknologi penting. Memandangkan saiz skrin dan resolusi peranti berbeza berbeza-beza, cara memaparkan halaman dengan baik pada pelbagai peranti menjadi satu cabaran.

Dalam CSS, Viewport ialah elemen penting yang digunakan untuk mengawal reka letak dan paparan halaman web. Viewport boleh dianggap sebagai tetingkap paparan halaman web, yang mentakrifkan lebar, ketinggian, nisbah zum dan sifat berkaitan halaman web yang lain. Dalam artikel ini, kami akan memperkenalkan cara menggunakan unit vh dan vmax Viewport untuk melaksanakan ketinggian skrin penyesuaian.

vh (tinggi viewport) ialah unit peratusan ketinggian Viewport, yang mewakili nisbah tertentu berbanding ketinggian viewport. Sebagai contoh, jika ketinggian elemen ditetapkan kepada 50vj, ketinggiannya akan menduduki 50% daripada ketinggian viewport.

vmax mewakili nilai saiz maksimum Viewport, iaitu lebih besar daripada vh dan vw (lebar viewport). Dalam erti kata lain, vmax boleh menentukan nilainya berdasarkan lebar dan ketinggian ruang pandang yang lebih besar.

Seterusnya, kami akan menggunakan kod sampel untuk menunjukkan cara menggunakan vh dan vmax untuk mencipta ketinggian skrin penyesuaian.

Mula-mula, kita perlu menambah kod berikut dalam teg <meta> dalam pengepala HTML untuk memberitahu penyemak imbas untuk menetapkan Viewport: <meta>标签中添加以下代码，用于告诉浏览器对Viewport进行设置：

<meta name="viewport" content="width=device-width, initial-scale=1">

Salin selepas log masuk

然后，在CSS样式表中，我们可以通过如下方式来使用vh和vmax单位：

body {
  margin: 0;
}

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

.text {
  font-size: 4vmax;
}

Salin selepas log masuk

在上面的示例代码中，我们创建了一个高度为100vh的容器（.container），并在其中居中显示了一个文本（.text）。容器采用了display: flexrrreee

Kemudian, dalam helaian gaya CSS, kita Anda boleh menggunakan unit vh dan vmax seperti berikut:

rrreee

Dalam kod contoh di atas, kami telah mencipta bekas (.container) dengan ketinggian 100vh dan memaparkan teks (.text) berpusat di dalamnya. Bekas menggunakan atribut display: flex untuk mencapai pemusatan menegak dan mendatar. Selain itu, saiz fon teks ditetapkan kepada 4vmax supaya ia menyesuaikan secara dinamik kepada ketinggian dan lebar port pandangan yang lebih besar.

Dengan kod CSS di atas, kami boleh melaksanakan reka letak yang menyesuaikan diri dengan ketinggian skrin. Reka letak ini akan kelihatan baik pada peranti berbeza bergantung pada saiz skrin peranti.

Untuk meringkaskan, menggunakan unit vh dan vmax boleh membantu kami membuat reka letak yang disesuaikan dengan ketinggian skrin. Dengan menetapkan ketinggian elemen kepada unit vh, kita boleh menjadikannya menempati bahagian ketinggian viewport. Menggunakan unit vmax membolehkan anda mengubah saiz elemen secara dinamik berdasarkan lebar dan ketinggian ruang pandang yang lebih besar. 🎜🎜Saya berharap melalui pengenalan dan contoh kod artikel ini, anda boleh lebih memahami dan menggunakan unit vh dan vmax, seterusnya mencapai reka letak halaman web adaptif yang lebih baik. Dalam pembangunan projek sebenar, kami boleh menggabungkan vh, vmax dan atribut CSS lain mengikut keperluan khusus dan keperluan reka bentuk untuk mencipta reka letak halaman web yang lebih fleksibel dan cantik. 🎜

Atas ialah kandungan terperinci CSS Viewport: Cara mencipta ketinggian skrin adaptif menggunakan vh dan vmax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!