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

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 */
}

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);
}

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!