Bagaimanakah Saya Boleh Skalakan Saiz Fon Secara Berkadaran dengan Saiz Bekas dalam Reka Bentuk Web Responsif?

Mengubah Saiz Fon Secara Berkadaran dengan Saiz DIV

Apabila membina susun atur web yang harus disesuaikan dengan pelbagai saiz skrin, adalah penting untuk memastikan bahawa teks kekal boleh dibaca pada semua resolusi. Isu biasa ialah teks mungkin tidak mengubah saiz secara berkadar dengan dimensi bekas.

Soalan:

1. Cara mengubah saiz teks secara dinamik untuk mengekalkan nisbah yang konsisten dengan bekas?
2. Adakah menggunakan berbilang pertanyaan @media dan reka letak yang dipesan lebih dahulu untuk saiz skrin yang berbeza merupakan pendekatan yang boleh dilaksanakan?

Penyelesaian:

Penyelesaian ini menggunakan CSS3 sahaja, menghapuskan keperluan untuk JavaScript:

Pendekatan CSS3 Tulen:

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

Penjelasan:

Ini pertanyaan media melaraskan saiz fon secara dinamik berdasarkan lebar skrin yang tersedia dalam kenaikan 100px, memastikan saiz fon yang kekal boleh dibaca dan sesuai secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Skalakan Saiz Fon Secara Berkadaran dengan Saiz Bekas dalam Reka Bentuk Web Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!