Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengubah Saiz Teks Secara Dinamik kepada Padankan Saiz Bekas?

Bagaimana untuk Mengubah Saiz Teks Secara Dinamik kepada Padankan Saiz Bekas?

Barbara Streisand
Lepaskan: 2024-11-16 21:11:03
asal
291 orang telah melayarinya

How to Dynamically Resize Text to Match Container Size?

Ubah Saiz Teks kepada Padankan Saiz Bekas

Pertanyaan anda bertujuan untuk melaraskan saiz fon teks secara dinamik dalam bekas yang mengubah saiz mengikut skrin dimensi. Begini cara anda boleh menangani setiap kebimbangan anda:

Saiz Semula Teks:

Gunakan fungsi calc() CSS untuk mengira saiz fon sebagai peratusan lebar bekas atau ketinggian. Contohnya:

#maininvite h2 {
  font-size: calc(4% + 1em); /* Adjusts font size based on container width */
}
Salin selepas log masuk

Pengendalian Berbilang Resolusi:

Daripada menggunakan banyak pertanyaan media CSS, penyelesaian yang lebih cekap ialah bergantung pada teknik susun atur cecair CSS. Dengan menggunakan peratusan, unit em atau unit vw dan vh, reka letak akan melaraskan secara automatik kepada pelbagai saiz skrin.

Berikut ialah coretan CSS yang dikemas kini yang menggunakan pendekatan ini bersama-sama dengan calc() untuk memastikan teks kekal berkadar ke bekas:

html,
body {
  height: 100%;
  width: 100%;
}

#launchmain {
  width: 55vw;
  display: inline-block;
  position: relative;
  top: 10vh;
  left: 25vw;
}

#maininvite {
  width: 33vw;
  height: 53vh;
  position: absolute;
  top: 22vh;
  left: 33vw;
}

#maininvite h2 {
  font-size: calc(4% + 1em);
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Teks Secara Dinamik kepada Padankan Saiz Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan