CSS Viewport: Cara menggunakan vmax dan vw untuk melaksanakan lebar teks adaptif

CSS Viewport: Cara menggunakan vmax dan vw untuk melaksanakan lebar teks adaptif

Dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi konsep penting dalam reka bentuk web. Antaranya, lebar teks penyesuaian untuk mengekalkan kesan paparan yang konsisten di bawah saiz skrin yang berbeza adalah teknologi penting. Artikel ini akan memperkenalkan cara menggunakan unit CSS Viewport, terutamanya unit vmax dan vw, untuk melaksanakan lebar teks penyesuaian. Sebagai tambahan kepada penjelasan teori, kami juga akan menyediakan contoh kod khusus untuk rujukan pembaca.

1. Apakah unit CSS Viewport

CSS Viewport unit adalah unit berbanding dengan saiz viewport (tetingkap penyemak imbas). Dalam CSS3, empat unit Viewport baharu telah diperkenalkan: vw, vh, vmin dan vmax. Antaranya, vw mewakili peratusan lebar port pandangan, vh mewakili peratusan ketinggian port pandangan, vmin mewakili lebar dan tinggi port pandangan yang lebih kecil, dan vmax mewakili lebar dan ketinggian port pandangan yang lebih besar.

2. Bagaimana untuk melaksanakan lebar teks penyesuaian menggunakan vmax dan vw

1. Tentukan saiz fon asas

Pertama, tentukan saiz fon asas dalam fail CSS, seperti:

:root {
  font-size: 16px;
}

di mana, :root < /code> mewakili elemen akar dokumen (biasanya elemen html), yang kami gunakan di sini sebagai asas untuk tetapan saiz fon. :root 表示文档的根元素（通常是 html 元素），这里我们将其作为字体大小设置的基准。

2. 使用 vmax 和 vw 单位设置字体大小和容器宽度

接下来，我们可以使用 vmax 和 vw 单位来设置字体大小和容器的宽度，具体步骤如下：

.container {
  width: 50vw; /* 容器的宽度为视口宽度的一半 */
}

.text {
  font-size: 5vmax; /* 设置文字的大小为视口宽度和高度中较大的那个的 5% */
}

在上述代码中，我们将容器的宽度设置为视口宽度的一半，这样容器就会随着视口的宽度变化而自适应调整。同时，我们使用 vmax 单位将文字的大小设置为视口宽度和高度中较大的那个的 5%，这样文字的宽度也会自适应调整。

3. 添加媒体查询

在某些情况下，我们可能需要在特定的屏幕尺寸下使用不同的样式。这时，可以使用媒体查询来针对不同的视口尺寸应用不同的样式。例如：

@media screen and (max-width: 600px) {
  .container {
    width: 90vw; /* 在小屏幕下将容器的宽度设置为视口宽度的 90% */
  }

  .text {
    font-size: 4vmax; /* 在小屏幕下将文字的大小设置为视口宽度和高度中较大的那个的 4% */
  }
}

在上述代码中，我们使用 @media

Gunakan unit vmax dan vw untuk menetapkan saiz fon dan lebar bekas

Seterusnya, kita boleh menggunakan unit vmax dan vw untuk menetapkan saiz fon dan lebar bekas, langkah-langkah khusus adalah seperti berikut :

rrreee

Dalam kod di atas, kami menetapkan lebar bekas kepada separuh lebar port pandangan, supaya bekas akan menyesuaikan secara adaptif apabila lebar port pandangan berubah. Pada masa yang sama, kami menggunakan unit vmax untuk menetapkan saiz teks kepada 5% daripada lebar dan ketinggian viewport yang lebih besar, supaya lebar teks juga akan disesuaikan secara adaptif.

🎜Tambah pertanyaan media🎜🎜🎜Dalam sesetengah kes, kita mungkin perlu menggunakan gaya yang berbeza pada saiz skrin tertentu. Dalam kes ini, anda boleh menggunakan pertanyaan media untuk menggunakan gaya yang berbeza untuk saiz port pandangan yang berbeza. Contohnya: 🎜rrreee🎜Dalam kod di atas, kami menggunakan pertanyaan media @media untuk menentukan gaya yang akan digunakan apabila lebar skrin kurang daripada atau sama dengan 600px. Pada skrin kecil, lebar bekas menjadi 90% daripada lebar port pandangan, dan saiz teks menjadi 4% daripada lebar dan ketinggian port pandangan yang lebih besar. 🎜🎜Ringkasan: 🎜🎜Dengan menggunakan unit CSS Viewport, terutamanya unit vmax dan vw, kita boleh mencapai kesan lebar teks adaptif dengan mudah. Dengan menetapkan lebar bekas dan saiz teks sebagai peratusan lebar dan ketinggian port pandangan, kami boleh memastikan paparan yang konsisten merentas saiz skrin yang berbeza. Pada masa yang sama, dengan menambahkan pertanyaan media, kami juga boleh menggunakan gaya yang berbeza di bawah saiz skrin tertentu untuk mengoptimumkan lagi pengalaman pengguna. 🎜🎜Saya harap artikel ini akan membantu pembaca memahami penggunaan unit CSS Viewport dan melaksanakan lebar teks penyesuaian. Jika anda mempunyai soalan atau memerlukan lebih banyak contoh kod, sila berasa bebas untuk bertanya. 🎜

Atas ialah kandungan terperinci CSS Viewport: Cara menggunakan vmax dan vw untuk melaksanakan lebar teks adaptif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!