Cara menggunakan unit CSS Viewport vw dan vmin untuk menyesuaikan reka letak kepada lebar skrin yang berbeza-tutorial css-php.cn

Cara menggunakan unit CSS Viewport vw dan vmin untuk menyesuaikan reka letak kepada lebar skrin yang berbeza

WBOY

Lepaskan： 2023-09-13 10:58:41

asal

650 orang telah melayarinya

如何使用 CSS Viewport 单位 vw 和 vmin 来实现适应不同屏幕宽度布局

Cara menggunakan unit CSS Viewport vw dan vmin untuk melaksanakan reka letak yang menyesuaikan dengan lebar skrin yang berbeza

Dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi salah satu piawaian reka bentuk web hari ini. Memastikan persembahan kandungan web yang baik menjadi sangat penting merentasi saiz dan resolusi skrin yang berbeza. Unit CSS Viewport vw (unit lebar viewport) dan vmin (unit yang lebih kecil bagi lebar dan ketinggian viewport) boleh membantu kami mencapai matlamat untuk menyesuaikan reka letak kepada lebar skrin yang berbeza.

Gunakan unit vw untuk susun atur
Viewport merujuk kepada kawasan dalam penyemak imbas di mana pengguna sebenarnya melayari halaman web. Unit vw adalah relatif kepada lebar viewport, dengan 1vw bersamaan dengan 1% lebar viewport. Dengan menggunakan unit vw kita boleh mengubah saiz elemen berdasarkan lebar ruang pandang.

Sebagai contoh, kita boleh menetapkan lebar elemen kepada separuh lebar viewport:

.element {
  width: 50vw;
}

Salin selepas log masuk

Dengan lebar viewport 1000px, lebar elemen akan menjadi 500px.

Gunakan unit vmin untuk susun atur
Selain unit vw, kita juga boleh menggunakan unit vmin untuk melaraskan saiz elemen berdasarkan lebar dan ketinggian ruang pandang yang lebih kecil. Ini berguna untuk melaksanakan segi empat sama atau elemen dengan nisbah bidang tetap.

Sebagai contoh, kita boleh menetapkan lebar dan tinggi sesuatu elemen kepada 20% daripada lebar dan tinggi port pandangan yang lebih kecil:

.element {
  width: 20vmin;
  height: 20vmin;
}

Salin selepas log masuk

Jika lebar dan tinggi port pandangan ialah 1000px dan tingginya ialah 800px, maka lebar dan tinggi bagi elemen Kedua-duanya ialah 160px.

Contoh menggunakan unit vw dan vmin untuk melaksanakan reka letak yang menyesuaikan dengan lebar skrin yang berbeza
Berikut adalah contoh yang menunjukkan cara menggunakan unit vw dan vmin untuk melaksanakan susun atur yang menyesuaikan dengan lebar skrin yang berbeza:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }
    
    .box {
      width: 20vmin;
      height: 20vmin;
      background-color: orange;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan div kontena, letakkan empat div kotak dalam satu baris dengan jarak 5px di antaranya. Lebar dan tinggi kotak adalah 20% daripada lebar dan tinggi port pandangan yang lebih kecil. Ini bermakna kotak akan muat secara berkadar tanpa mengira lebar skrin.

Ringkasan
Unit CSS Viewport vw dan vmin boleh membantu kami mencapai matlamat untuk menyesuaikan diri dengan reka letak lebar skrin yang berbeza semasa mereka bentuk halaman web. Dengan menggunakan unit ini, kami boleh melaraskan saiz dan reka letak elemen berdasarkan dimensi port pandangan, membolehkan reka bentuk responsif. Sama ada pengguna menggunakan monitor skrin besar, komputer riba atau peranti mudah alih, kami memastikan kandungan web anda kelihatan cantik dan dipersembahkan dengan baik.

Nota: Apabila menggunakan unit vw dan vmin, anda perlu mempertimbangkan isu keserasian penyemak imbas yang berbeza untuk memastikan paparan yang betul pada pelbagai peranti.

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