Cara menggunakan unit CSS Viewport vw dan vh untuk melaksanakan reka letak yang menyesuaikan diri dengan skrin tablet dan mudah alih-tutorial css-php.cn

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

PHPz

Lepaskan： 2023-09-13 12:26:00

asal

1364 orang telah melayarinya

如何使用 CSS Viewport 单位 vw 和 vh 来实现适应平板和手机屏幕的布局

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

Apabila mereka bentuk reka letak web responsif, kita sering perlu mempertimbangkan isu penyesuaian saiz skrin peranti yang berbeza. Unit CSS Viewport vw (lebar viewport) dan vh (viewport height) menyediakan cara mudah untuk mencapai kebolehsuaian reka letak pada skrin tablet dan mudah alih.

Unit viewport vw dan vh dikira secara relatif kepada lebar dan ketinggian viewport, dengan 1vw bersamaan dengan 1% daripada lebar viewport dan 1vh bersamaan dengan 1% ketinggian viewport. Dengan menggunakan unit ini dengan sewajarnya, kami boleh mengawal saiz dan kedudukan elemen dengan mudah dalam saiz port pandangan yang berbeza.

Yang berikut akan memperkenalkan secara terperinci cara menggunakan unit CSS Viewport vw dan vh untuk melaksanakan reka letak yang disesuaikan dengan skrin tablet dan telefon mudah alih.

Tetapkan gaya asas

Sebelum memulakan reka letak, kita perlu menetapkan beberapa gaya asas untuk memastikan gaya lalai halaman menyesuaikan diri dengan skrin peranti yang berbeza. Mula-mula, kita boleh menambah gaya berikut pada elemen badan:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Salin selepas log masuk

Ini akan menghapuskan jidar lalai dan padding dan menetapkan model kotak kepada model kotak sempadan.

Gunakan unit vw dan vh untuk menetapkan saiz elemen

Apabila mereka bentuk reka letak, kita perlu mengambil kira perubahan saiz elemen halaman di bawah saiz tetingkap paparan yang berbeza. Pada masa ini, anda boleh menggunakan unit vw dan vh untuk menetapkan saiz elemen.

.element {
  width: 50vw; /* 宽度为视窗宽度的 50% */
  height: 30vh; /* 高度为视窗高度的 30% */
}

Salin selepas log masuk

Dengan menetapkan lebar dan tinggi kepada nilai unit relatif, kami boleh memastikan elemen mengekalkan perkadaran yang betul merentas saiz port pandangan yang berbeza.

Tetapkan kedudukan elemen menggunakan unit vw dan vh

Selain menetapkan saiz elemen, kita juga perlu mengambil kira kedudukan elemen pada halaman. Pada masa ini, anda boleh menggunakan unit vw dan vh untuk menetapkan kedudukan elemen.

.element {
  position: absolute;
  left: 50vw; /* 左边距为视窗宽度的 50% */
  top: 25vh; /* 上边距为视窗高度的 25% */
}

Salin selepas log masuk

Dengan menetapkan sifat kiri dan atas kepada nilai unit relatif, kami boleh memastikan bahawa kedudukan relatif elemen kekal tidak berubah merentas saiz port pandangan yang berbeza.

Laraskan reka letak menggunakan pertanyaan media

Dengan menggunakan pertanyaan media, kami boleh menggunakan gaya atau reka letak yang berbeza mengikut saiz skrin peranti yang berbeza.

Sebagai contoh, apabila lebar skrin kurang daripada 768px, kita boleh melaraskan saiz dan kedudukan elemen:

@media (max-width: 768px) {
  .element {
    width: 80vw;
    height: 25vh;
    left: 10vw;
    top: 15vh;
  }
}

Salin selepas log masuk

Dengan cara ini, apabila lebar skrin kurang daripada 768px, saiz dan kedudukan elemen .element akan dilaraskan mengikut gaya dalam pertanyaan media.

Ringkasnya, dengan menggunakan unit CSS Viewport vw dan vh, kami boleh mencapai kesesuaian reka letak dengan mudah pada skrin tablet dan mudah alih. Dengan menetapkan saiz dan kedudukan elemen kepada nilai unit relatif dan menggabungkan pertanyaan media untuk menyesuaikan diri dengan saiz skrin peranti yang berbeza, kami boleh memastikan bahawa halaman web memberikan pengalaman pengguna terbaik pada peranti yang berbeza.

Contoh kod:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .element {
      width: 50vw;
      height: 30vh;
      position: absolute;
      left: 50vw;
      top: 25vh;
      background-color: red;
    }
    
    @media (max-width: 768px) {
      .element {
        width: 80vw;
        height: 25vh;
        left: 10vw;
        top: 15vh;
      }
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Salin selepas log masuk

Di atas ialah kaedah dan contoh kod tentang cara menggunakan unit CSS Viewport vw dan vh untuk melaksanakan reka letak yang disesuaikan dengan skrin tablet dan mudah alih. Saya harap ia akan membantu kerja penyesuaian reka letak anda!

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