Rumah > Artikel > hujung hadapan web > Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin

Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin

WBOYasal: 2023-09-13 13:18:311230semak imbas

如何使用 CSS Viewport 单位来实现根据屏幕尺寸调整元素位置的技巧

Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen mengikut saiz skrin

Dalam pembangunan web, kita sering menghadapi keperluan Keperluan untuk melaraskan kedudukan dan saiz elemen mengikut saiz skrin yang berbeza. Untuk mencapai matlamat ini, unit CSS Viewport digunakan secara meluas. Unit viewport ialah unit relatif kepada saiz tetingkap penyemak imbas Dengan menggunakannya, kami boleh melaraskan kedudukan elemen secara dinamik berdasarkan saiz skrin, dengan itu memberikan pengalaman pengguna yang lebih baik.

1 Memahami unit Viewport

Terdapat empat jenis unit Viewport: vw (peratusan lebar tingkap), vh (peratusan ketinggian tingkap), vmin (antara lebar tingkap dan ketinggian) sebagai peratusan daripada nilai yang lebih kecil) dan vmax (peratusan daripada lebar dan ketinggian port pandangan yang lebih besar).

Ambil vw sebagai contoh, dengan mengandaikan lebar viewport ialah 1000px, jika kita menetapkan lebar elemen kepada 50vw, lebarnya ialah 500px (separuh daripada 1000px), tanpa mengira saiz skrin pengguna Bagaimana besar kan.

2. Contoh Demonstrasi

Yang berikut menggunakan contoh untuk menunjukkan cara menggunakan unit Viewport untuk melaraskan kedudukan elemen.

html Kod:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .box {
        width: 50vw;
        height: 50vh;
        background-color: #ff0000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

Dalam kod di atas, kami mencipta elemen div bernama "bekas" dan menetapkan lebar dan tinggi kepada 100vw dan 100vh, yang bermaksud Ia akan mengambil masa ke atas seluruh skrin. Seterusnya, elemen div bernama "kotak" ditambahkan pada bekas, dan lebar dan ketinggian ditetapkan kepada 50vw dan 50vh, dan warna latar belakang adalah merah.

Menjalankan kod di atas, kita dapat melihat bahawa tidak kira betapa besar saiz skrin, elemen kotak sentiasa dipaparkan di tengah, dan lebar dan ketinggiannya disesuaikan secara adaptif mengikut saiz skrin.

3. Lebih banyak senario aplikasi

Selain contoh asas melaraskan kedudukan dan saiz elemen, unit Viewport juga boleh digunakan untuk senario aplikasi yang lebih kompleks. Contohnya, anda boleh menggunakan unit vw untuk menetapkan saiz imej responsif atau menggunakan unit vh untuk mencapai kesan tatal skrin penuh yang menyesuaikan diri dengan ketinggian skrin.

Selain itu, anda juga boleh menggabungkan Pertanyaan Media CSS dan unit Viewport untuk melaraskan reka letak dan gaya yang berbeza mengikut saiz skrin. Sebagai contoh, anda boleh menyembunyikan elemen pada peranti skrin kecil dan menunjukkannya pada peranti skrin besar dan anda boleh menggunakan unit Viewport untuk melaraskan saiz dan kedudukan elemen.

Ringkasan

Unit Viewport CSS menyediakan cara yang fleksibel untuk melaraskan kedudukan dan saiz elemen berdasarkan saiz skrin. Kita boleh menggunakan unit vw, vh, vmin dan vmax untuk menetapkan lebar, ketinggian dan kedudukan elemen untuk memberikan pengalaman pengguna yang lebih baik. Sama ada reka letak berpusat yang ringkas atau reka bentuk responsif yang kompleks, unit Viewport boleh membantu kami mencapai reka letak dan kesan gaya yang fleksibel.

Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html viewport

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan unit CSS Viewport vw dan vh untuk melaksanakan reka letak yang menyesuaikan diri dengan skrin tablet dan mudah alihArtikel seterusnya：Cara menggunakan unit CSS Viewport vw dan vh untuk melaksanakan reka letak yang menyesuaikan diri dengan skrin tablet dan mudah alih

Artikel berkaitan

Lihat lagi