Tipografi responsif telah mencuba banyak kaedah pada masa lalu, seperti pertanyaan media dan CSS Calc ().

Artikel ini akan meneroka pendekatan yang berbeza, iaitu untuk skala teks secara linear antara saiz minimum dan maksimum apabila lebar viewport meningkat, dengan matlamat membuat kelakuannya lebih diramalkan pada saiz skrin yang berbeza -semuanya dengan hanya satu baris kod CSS, terima kasih kepada clamp() .

clamp() berkuasa. Ia berfungsi untuk semua tujuan, tetapi sangat berguna untuk tipografi. Ia berfungsi seperti berikut: Ia menerima tiga nilai:

 <code>clamp(minimum, preferred, maximum);</code>

Nilai yang dikembalikan akan menjadi nilai pilihan sehingga nilai pilihan berada di bawah nilai minimum (nilai minimum akan dikembalikan) atau melebihi nilai maksimum (nilai maksimum akan dikembalikan).

Oleh itu, dengan mengandaikan anda tidak menetapkan nilai pelik dan menetapkannya di antara nilai minimum dan maksimum, adakah ia selalu menjadi nilai pilihan? Nah, anda harus menggunakan formula dengan nilai pilihan, sebagai contoh:

 <code>.banner { width: clamp(200px, 50% 20px, 800px); /* 是的，您可以在clamp() 中進(jìn)行數(shù)學(xué)運(yùn)算！*/ }</code>

Katakan anda ingin menetapkan saiz fon minimum elemen kepada 1 REM apabila lebar viewport adalah 360px atau di bawah dan saiz fon maksimum ialah 3.5 REM apabila lebar viewport adalah 840px atau ke atas.

Dengan kata lain:

 <code>1rem  = 360px 及以下縮放= 361px - 839px 3.5rem = 840px 及以上</code>

Mana -mana lebar viewport antara 361 dan 839 piksel memerlukan saiz fon yang berskala secara linear antara 1REM dan 3.5REM. Menggunakan clamp() sebenarnya sangat mudah ! Sebagai contoh, dengan lebar viewport sebanyak 600 piksel (antara 360 dan 840 piksel), kita akan mendapat nilai pertengahan antara 1REM dan 3.5REM, iaitu 2.25REM.

Matlamat yang kami cuba capai dengan clamp() dipanggil interpolasi linear : Mendapat maklumat pertengahan antara dua titik data.

Berikut adalah empat langkah untuk melakukan ini:

Langkah 1

Pilih saiz fon minimum dan maksimum, serta lebar viewport minimum dan maksimum. Dalam contoh kami, saiz fon adalah 1REM dan 3.5REM dan lebarnya ialah 360px dan 840px.

Langkah 2

Tukar lebar ke REM. Oleh kerana 1REM pada kebanyakan penyemak imbas adalah 16px secara lalai (lebih banyak lagi pada kemudian), kami akan menggunakannya. Oleh itu, lebar viewport minimum dan maksimum akan menjadi 22.5 REM dan 52.5 REM, masing -masing.

Langkah 3

Di sini kita akan sedikit berat sebelah ke arah aspek matematik. Apabila digabungkan, lebar viewport dan saiz fon membentuk dua mata pada sistem koordinat X dan Y, dan titik -titik ini membentuk garis.

Kami memerlukan garis ini -lebih khusus, kami memerlukan cerunnya dan persimpangannya dengan paksi y. Inilah kaedah pengiraan:

 <code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope minFontSize</code>

Ini membawa kita ke nilai cerun 0.0833 dan nilai persimpangan paksi Y -0.875.

Langkah 4

Sekarang kita membina fungsi clamp() . Formula untuk nilai pilihan adalah:

 <code>preferredValue = yAxisIntersection[rem] (slope * 100)[vw]</code>

Jadi, fungsi berakhir seperti ini:

 <code>.header { font-size: clamp(1rem, -0.875rem 8.333vw, 3.5rem); }</code>

Anda boleh memvisualisasikan hasil dalam demonstrasi berikut:

Terus pergi dan mencubanya. Seperti yang anda lihat, apabila lebar viewport adalah 840px, saiz fon berhenti berkembang, dan apabila lebar viewport adalah 360px, saiz fon berhenti berkurangan. Segala -galanya di antara perubahan dengan cara linear.

Bagaimana jika pengguna mengubah saiz fon root?

Anda mungkin telah melihat kecacatan kecil dalam pendekatan ini: ia berfungsi hanya jika saiz fon akar adalah apa yang anda fikirkan (16px dalam contoh sebelumnya) dan tidak pernah berubah.

Kami menukar lebar 360px dan 840px ke dalam unit REM dengan membahagikannya dengan 16, kerana kami menganggap bahawa ini adalah saiz fon akar. Jika pengguna menetapkan keutamaannya kepada saiz fon akar yang lain, seperti 18px dan bukannya 16px lalai, pengiraan akan salah dan teks tidak akan mengubah saiz seperti yang kita harapkan.

Kami hanya mempunyai satu cara untuk digunakan di sini, iaitu (1) melakukan pengiraan yang diperlukan dalam kod apabila halaman dimuatkan, (2) mendengar perubahan dalam saiz fon akar, dan (3) mengira semula segala -galanya jika ada perubahan.

Berikut adalah fungsi JavaScript yang berguna untuk melakukan pengiraan:

 // Dapatkan lebar viewport dalam piksel dan saiz fon dalam fungsi REM ClampBuilder (MinwidthPx, MaxWidThPx, MinFontSize, MaxFontsize) {
  const root = document.QuerySelector ("html");
  const pixelsperRem = nombor (getComputStyle (root) .fontsize.slice (0, -2));

  const minWidth = minWidthPx / pixelsperRem;
  const maxWidth = maxWidthPx / pixelsperRem;

  Const Slope = (MaxFontsize - MinFontSize) / (MaxWidth - MinWidth);
  const YaxisIntersection = -MinWidth * lereng minfontsize;

  kembali `Clamp ($ {Minfontsize} Rem, $ {YaxisIntersection} Rem $ {Slope * 100} VW, $ {MaxFontsize} Rem)`;
}

// ClampBuilder (360, 840, 1, 3.5) -> "Clamp (1rem, -0.875rem 8.333vw, 3.5rem)"

Saya sengaja meninggalkan bagaimana untuk menyuntik rentetan yang dikembalikan ke CSS kerana terdapat banyak cara untuk melakukan ini bergantung kepada keperluan anda dan sama ada anda menggunakan CSS asli, perpustakaan CSS-in-JS atau sesuatu yang lain. Juga, tidak ada peristiwa asli untuk perubahan saiz fon, jadi kita perlu menyemak secara manual. Kita boleh menggunakan setInterval untuk memeriksa sekali sesaat, tetapi ini boleh menjejaskan prestasi.

Ini lebih seperti keadaan yang melampau. Beberapa orang mengubah saiz fon penyemak imbas mereka, dan bahkan lebih sedikit orang mengubahnya ketika melawat laman web anda. Tetapi jika anda mahu laman web anda menjadi responsif yang mungkin, maka ini adalah cara terbaik untuk melakukannya.

Bagi mereka yang tidak keberatan situasi yang melampau

UPDATE: Sumber yang dikongsi di sini telah berhenti bekerja sejak artikel ini pertama kali diterbitkan. Jika anda mencari kalkulator untuk membantu menentukan saiz fon di bawah pelbagai pandangan, pertimbangkan untuk menggunakan penjana jenis cecair, yang menggunakan tipografi cecair moden.

Cara mengelakkan penyesuaian semula teks

Kawalan yang teliti ke atas saiz tipografi membolehkan kita melakukan perkara-perkara yang lain-seperti menghalang teks daripada menyesuaikan semula pada lebar viewport yang berbeza.

Ini adalah tingkah laku biasa teks.

Tetapi sekarang, dengan kawalan kami, kami dapat menyimpan teks dengan bilangan baris yang sama, sentiasa membungkus garis pada perkataan yang sama, tidak kira lebar paparan yang kami gunakan.

Jadi bagaimana kita boleh melakukan ini? Pertama, nisbah antara saiz fon dan lebar viewport mesti tetap sama. Dalam contoh ini, kita berubah dari 1REM pada 320px ke 3rem pada 960px.

 <code>320 / 1 = 320 960 / 3 = 320</code>

Jika kita menggunakan fungsi clampBuilder() yang ditulis sebelum ini, ia akan menjadi:

 const text = document.QuerySelector ("p");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);

Ia mengekalkan lebar yang sama dengan nisbah fon. Alasan yang kita lakukan ini ialah kita perlu memastikan teks mempunyai saiz yang betul pada setiap lebar supaya kita dapat mengekalkan bilangan baris yang sama. Ia masih akan disesuaikan dengan lebar yang berbeza, tetapi ini perlu untuk kerja seterusnya yang perlu kita lakukan.

Sekarang kita perlu mendapatkan bantuan daripada unit CSS (CH), kerana mempunyai saiz fon yang betul tidak mencukupi. Unit CH adalah bersamaan dengan lebar glyph "0" dalam fon elemen. Kami mahu menjadikan badan teks selebar sebagai viewport, bukan dengan menetapkan width: 100% , tetapi dengan menggunakan width: Xch , di mana x adalah bilangan unit CH (atau 0) yang diperlukan untuk mengisi viewport secara mendatar.

Untuk mencari x, kita mesti membahagikan lebar minimum Viewport 320px dengan saiz CH elemen pada saiz fon apabila lebar viewport adalah 320px. Dalam kes ini ia adalah 1 REM.

Jangan risau, inilah coretan kod untuk mengira saiz ch unsur:

 // Mengembalikan lebar elemen "0" glyph (dalam piksel) pada saiz fon yang dikehendaki
fungsi calculatech (elemen, fontsize) {
  const sifar = document.createElement ("span");
  sifar.innertext = "0";
  sifar.style.position = "mutlak";
  sifar.style.fontsize = fontsize;

  elemen.AppendChild (sifar);
  const chpixels = sifar.getBoundingClientRect (). Lebar;
  elemen.removechild (sifar);

  kembali chpixels;
}

Sekarang kita dapat terus menetapkan lebar teks:

 fungsi calculatech (elemen, fontsize) {...}

const text = document.QuerySelector ("p");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);
text.style.width = `$ {320 / calculatech (teks," 1rem ")} ch`;

Wow, tunggu. Sesuatu yang buruk berlaku. Terdapat bar tatal mendatar yang merosakkan perkara!

Apabila kita bercakap tentang 320px, kita bercakap tentang lebar viewport, termasuk bar skrol menegak. Oleh itu, lebar teks ditetapkan pada lebar kawasan yang kelihatan ditambah lebar bar tatal, yang menjadikannya melimpah secara melintang.

Jadi mengapa tidak menggunakan ukuran yang tidak mengandungi lebar bar skrol menegak? Kita tidak boleh, itu kerana unit CSS VW. Ingat, kami menggunakan VW dalam clamp() untuk mengawal saiz fon. Anda akan melihat bahawa VW termasuk lebar bar skrol menegak, yang menjadikan skala fon bersama dengan lebar viewport, termasuk bar skrol. Jika kita mahu mengelakkan sebarang penyesuaian semula, lebarnya mestilah berkadar dengan lebar viewport, termasuk bar skrol.

Jadi apa yang harus kita lakukan? Semasa kita lakukan:

 text.style.width = `$ {320 / calculatech (teks," 1rem ")} ch`;

... Kita boleh mengecilkan hasilnya dengan mendarabkannya dengan jumlah yang kurang daripada 1. 0.9 dapat menyelesaikan masalah. Ini bermakna lebar teks akan menjadi 90% daripada lebar viewport, yang akan mencukupi untuk membuat ruang kecil yang diambil oleh scrollbar. Kita boleh membuatnya lebih sempit dengan menggunakan nombor yang lebih kecil (mis. 0.6).

 fungsi calculatech (elemen, fontsize) {...}

const text = document.QuerySelector ("p");
text.style.fontsize = ClampBuilder (20, 960, 1, 3);
text.style.width = `$ {320 / calculatech (teks," 1rem ") * 0.9} ch`;

Anda mungkin cenderung untuk menolak beberapa piksel dari 320 untuk mengabaikan bar skrol, seperti itu:

 text.style.width = `$ {(320 - 30) / calculatech (teks," 1rem ")} ch`;

Masalah dengan melakukan ini adalah bahawa ia akan memulihkan masalah retuning! Ini kerana pengurangan dari 320 akan memusnahkan nisbah viewport ke fon.

Lebar teks mesti selalu menjadi peratusan lebar viewport. Satu lagi perkara yang perlu diperhatikan ialah kita perlu memastikan kita memuatkan font yang sama pada setiap peranti yang menggunakan laman web ini. Ini terdengar jelas, bukan? Nah, inilah butiran kecil yang mungkin menyimpang teks anda. Melakukan perkara seperti font-family: sans-serif tidak menjamin fon yang sama digunakan dalam setiap pelayar. sans-serif akan menetapkan Arial pada Chrome untuk Windows, tetapi Roboto pada Chrome untuk Android. Di samping itu, geometri beberapa fon boleh menyebabkan penyesuaian semula, walaupun anda melakukan semuanya dengan betul. Fon Monowidth cenderung menghasilkan hasil yang terbaik. Oleh itu, pastikan untuk memastikan fon anda tepat.

Lihat contoh bukan retun ini dalam demonstrasi berikut:

Teks bukan rwasta dalam bekas

Apa yang perlu kita lakukan sekarang ialah menggunakan saiz dan lebar fon ke bekas, bukan terus ke elemen teks. Teks di dalamnya hanya perlu ditetapkan kepada width: 100% . Untuk perenggan dan tajuk, ini tidak perlu kerana mereka adalah unsur-unsur peringkat blok sendiri dan secara automatik akan mengisi lebar bekas.

Satu kelebihan menggunakan kaedah ini dalam bekas induk ialah anak -anaknya akan bertindak balas secara automatik dan saiz semula tanpa menetapkan saiz fon dan lebarnya satu demi satu. Selain itu, jika kita perlu menukar saiz fon satu elemen tanpa menjejaskan yang lain, kita hanya menukar saiz fonnya ke mana -mana nilai EM dan secara semulajadi akan menjadi relatif kepada saiz fon bekas.

Teks bukan retun adalah pemilih, tetapi ia adalah kesan halus yang boleh membawa hasil yang baik kepada reka bentuk!

Meringkaskan

Untuk meringkaskan, saya menyusun demonstrasi kecil bagaimana semua ini kelihatan dalam senario kehidupan sebenar.

Dalam contoh akhir ini, anda juga boleh mengubah saiz fon akar dan fungsi clamp() secara automatik akan dikira semula supaya teks akan mempunyai saiz yang betul dalam apa jua keadaan.

Walaupun matlamat artikel ini adalah menggunakan clamp() dengan saiz fon, teknik yang sama ini boleh digunakan untuk menerima sebarang sifat CSS unit panjang. Sekarang, saya tidak mengatakan bahawa anda harus menggunakannya di mana sahaja. Banyak kali, font-size: 1rem sudah cukup. Saya hanya ingin menunjukkan kepada anda berapa banyak kawalan yang anda boleh lakukan apabila anda memerlukannya .

Secara peribadi, saya percaya clamp() adalah salah satu perkara terbaik di CSS dan saya tidak sabar untuk melihat apa yang digunakan oleh orang lain kerana ia menjadi lebih banyak digunakan!

Atas ialah kandungan terperinci Saiz fon berskala linear dengan pengapit CSS () berdasarkan paparan paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!