Cara menggunakan unit CSS Viewport vw untuk melaksanakan susun atur penyesuaian mendatar

Cara menggunakan unit CSS Viewport vw untuk melaksanakan susun atur adaptif mendatar

CSS Viewport ialah unit relatif kepada lebar viewport, yang boleh digunakan untuk mencipta reka letak responsif. Antaranya, vw mewakili unit peratusan lebar ruang pandang.

Dalam artikel ini, kita akan belajar cara menggunakan unit CSS Viewport vw untuk melaksanakan reka letak penyesuaian mendatar dan memberikan contoh kod khusus.

1. Tetapkan gaya asas

Pertama, kita perlu menetapkan beberapa gaya asas untuk memulakan susun atur kita.

HTML:

<div class="container">
  <div class="content">
    <p>这是一个水平自适应布局的示例文本。</p>
  </div>
</div>

CSS:

.container {
  width: 100vw; /* 使用 vw 单位设置容器的宽度 */
  height: 100vh; /* 使用 vh 单位设置容器的高度 */
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #f4f4f4;
}

.content {
  width: 80%; /* 使用百分比设置内容的宽度 */
  padding: 20px;
  background-color: #fff;
}

Dalam kod di atas, kami mencipta bekas yang mengandungi kandungan teks dan menggunakan unit vw dan vh untuk menetapkan lebar dan ketinggian bekas. Kami juga menggunakan susun atur flexbox untuk pemusatan mendatar dan menegak.

2. Tambah pertanyaan media

Seterusnya, kami akan menambah pertanyaan media untuk menyesuaikan reka letak kepada lebar skrin yang berbeza.

@media (max-width: 768px) {
  .content {
    width: 90%; /* 在小屏幕下，设置内容的宽度为 90% */
  }
}

@media (max-width: 480px) {
  .content {
    width: 95%; /* 在更小屏幕下，设置内容的宽度为 95% */
  }
}

Dalam kod di atas, kami menggunakan pertanyaan media untuk mengawal lebar kandungan di bawah lebar skrin yang berbeza. Apabila lebar skrin kurang daripada atau sama dengan 768px, lebar kandungan ditetapkan kepada 90% apabila lebar skrin kurang daripada atau sama dengan 480px, lebar kandungan ditetapkan kepada 95%.

3. Laksanakan kesan menatal

Kadangkala, kita mungkin mahu susun atur boleh ditatal apabila ia melebihi lebar skrin supaya pengguna dapat melihat keseluruhan kandungan. Begini cara untuk mencapai kesan menatal.

CSS:

.container {
  overflow-x: scroll; /* 在水平方向上启用滚动效果 */
}

Dengan menetapkan overflow-x: tatal pada bekas, kami boleh mendayakan bar skrol mendatar apabila melebihi lebar skrin. Ini membolehkan pengguna menyemak imbas keseluruhan kandungan dengan bar skrol mendatar.

Dalam artikel ini, kami mempelajari cara menggunakan unit CSS Viewport vw untuk melaksanakan reka letak penyesuaian mendatar. Kami menetapkan lebar dan ketinggian bekas dan mencapai pemusatan mendatar dan menegak melalui susun atur flexbox. Kami juga menambah pertanyaan media untuk menyesuaikan reka letak kepada lebar skrin yang berbeza, dan mencapai kesan tatal mendatar dengan menetapkan limpahan-x: tatal.

Melalui teknologi dan kod sampel ini, kami boleh mengawal dan menyesuaikan dengan lebih baik pada reka letak saiz skrin yang berbeza, memberikan pengguna pengalaman menyemak imbas yang lebih baik.

Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport vw untuk melaksanakan susun atur penyesuaian mendatar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!