Rumah > hujung hadapan web > tutorial css > Bagaimana untuk membuat teks menukar saiz secara automatik dalam css

Bagaimana untuk membuat teks menukar saiz secara automatik dalam css

WBOY
Lepaskan: 2021-12-10 15:51:00
asal
6658 orang telah melayarinya

Dalam css, anda boleh menggunakan atribut "font-size" dan unit vw untuk menukar saiz teks secara automatik Atribut "font-size" digunakan untuk menetapkan saiz fon unit vw boleh menukar saiz secara automatik mengikut lebar viewport , yang membolehkan teks menukar saiz secara automatik Sintaks ialah "elemen teks {font-size: value vw;}".

Bagaimana untuk membuat teks menukar saiz secara automatik dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara menukar saiz teks secara automatik dalam css

Dalam css, anda boleh menggunakan unit vw untuk menukar saiz teks secara automatik .

vw ialah atribut css, serupa dengan px, rem, dsb., dan merupakan unit panjang. Dalam penyemak imbas, 1 vw = lebar viewport/100

Menurut ciri ini, vw boleh membantu kami melaksanakan reka letak penyesuaian mudah alih Kelebihannya ialah apa yang anda lihat adalah apa yang anda perolehi, malah lebih baik daripada rem, kerana ia tidak digunakan sama sekali.

Adalah disyorkan untuk menggunakannya dengan bahasa prapemprosesan CSS​​seperti sass dan kurang, kerana ia boleh menentukan pembolehubah dan fungsi, yang akan memberikan bantuan besar dalam menggunakan vw.

Contoh adalah seperti berikut:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      font-size:5vw;
    }
  </style>
</head>
<body>
<p>文字自动改变大小</p>
</body>
</html>
Salin selepas log masuk

Hasil output:

 5.gif

(Belajar perkongsian video: css tutorial video )

Atas ialah kandungan terperinci Bagaimana untuk membuat teks menukar saiz secara automatik dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan