Ukuran font responsif dalam CSS

Saya telah membuat situs menggunakan kisi Zurb Foundation 3 . Setiap halaman memiliki besar h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Ketika saya mengubah ukuran browser ke ukuran ponsel, font yang besar tidak menyesuaikan dan menyebabkan browser menyertakan scroll horizontal untuk mengakomodasi teks yang besar.

Saya perhatikan bahwa pada halaman contoh Tipografi Zurb Foundation 3 , header beradaptasi dengan browser saat dikompresi dan diperluas.

Apakah saya melewatkan sesuatu yang sangat jelas? Bagaimana saya mencapai ini?

Tidak font-sizeakan merespons seperti ini saat mengubah ukuran jendela browser. Sebagai gantinya mereka merespons pengaturan ukuran zoom / ketik browser, seperti jika Anda menekan Ctrldan +bersama - sama pada keyboard saat berada di browser.

Kueri Media

Anda harus melihat menggunakan kueri media untuk mengurangi ukuran font pada interval tertentu di mana ia mulai merusak desain Anda dan membuat scrollbar.

Misalnya, coba tambahkan ini di dalam CSS Anda di bagian bawah, ubah lebar 320 piksel untuk tempat desain Anda mulai rusak:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Panjang persentase viewport

Anda juga dapat menggunakan panjang persentase viewport seperti vw, vh, vmindan vmax. Dokumen W3C resmi untuk negara ini:

Panjang viewport-persentase relatif terhadap ukuran blok berisi awal. Ketika tinggi atau lebar blok yang mengandung awal diubah, mereka diskalakan sesuai.

Sekali lagi, dari dokumen W3C yang sama, masing-masing unit dapat didefinisikan sebagai berikut:

vw unit - Sama dengan 1% dari lebar blok yang berisi awal.

vh unit - Sama dengan 1% dari tinggi blok yang berisi awal.

vmin unit - Sama dengan yang lebih kecil dari vw atau vh.

vmax unit - Sama dengan yang lebih besar dari vw atau vh.

Dan mereka digunakan dengan cara yang persis sama dengan nilai CSS lainnya:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Kompatibilitasnya relatif bagus seperti yang bisa dilihat di sini . Namun, beberapa versi Internet Explorer dan Edge tidak mendukung vmax. Juga, iOS 6 dan 7 memiliki masalah dengan unit vh, yang diperbaiki di iOS 8.

Anda dapat menggunakan nilai viewport alih-alih ems, pxs, atau pts:

1vw = 1% dari lebar viewport

1vh = 1% dari tinggi viewport

1vmin = 1vw atau 1vh, mana yang lebih kecil

1vmax = 1vw atau 1vh, mana yang lebih besar

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Dari CSS-Trik: Tipografi Berukuran Viewport

Saya telah bermain-main dengan cara untuk mengatasi masalah ini, dan percaya saya telah menemukan solusi:

Jika Anda dapat menulis aplikasi Anda untuk Internet Explorer 9 (dan yang lebih baru) dan semua peramban modern lain yang mendukung CSS calc (), unit rem, dan unit vmin. Anda dapat menggunakan ini untuk mencapai teks yang skalabel tanpa kueri media:

body {
  font-size: calc(0.75em + 1vmin);
}

Ini dia sedang beraksi: http://codepen.io/csuwldcat/pen/qOqVNO

Gunakan mediaspecifier CSS (itulah yang mereka [zurb] gunakan) untuk gaya responsif:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Jika Anda tidak keberatan menggunakan solusi jQuery, Anda dapat mencoba plugin TextFill

jQuery TextFill mengubah ukuran teks agar muat ke dalam wadah dan membuat ukuran font sebesar mungkin.

https://github.com/jquery-textfill/jquery-textfill

Ada beberapa cara untuk mencapai ini.

Gunakan kueri media , tetapi membutuhkan ukuran font untuk beberapa breakpoint:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Gunakan dimensi dalam % atau em . Ubah saja ukuran font dasar, dan semuanya akan berubah. Berbeda dengan yang sebelumnya, Anda bisa saja mengubah font tubuh dan tidak h1 setiap kali atau membiarkan ukuran font dasar menjadi default perangkat dan sisanya semua dalam em:

1. "Ems" (em) : "em" adalah unit yang dapat diskalakan. Em sama dengan ukuran font saat ini, misalnya, jika ukuran font dokumen adalah 12 pt, 1 em sama dengan 12 pt. Ems bersifat scalable, jadi 2 em akan sama dengan 24 pt, .5 em akan sama dengan 6 pt, dll.
2. Persen (%) : Unit persen mirip dengan unit "em", kecuali untuk beberapa perbedaan mendasar. Pertama dan terpenting, ukuran font saat ini sama dengan 100% (yaitu 12 pt = 100%). Saat menggunakan unit persen, teks Anda tetap sepenuhnya dapat diskalakan untuk perangkat seluler dan aksesibilitas.

Lihat kyleschaeffer.com / ....

CSS 3 mendukung dimensi baru yang relatif terhadap port tampilan. Tapi ini tidak berfungsi di Android:

1. 3.2vw = 3.2% dari lebar viewport
2. 3.2vh = 3.2% dari ketinggian viewport
3. 3.2vmin = Lebih kecil dari 3.2vw atau 3.2vh

4. 3.2vmax = Lebih besar dari 3.2vw atau 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Lihat Trik-CSS ... dan lihat juga Dapatkah Saya Menggunakan ...

Ada pendekatan lain untuk ukuran font responsif - menggunakan unit rem.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Kemudian di kueri media, Anda dapat menyesuaikan semua ukuran font dengan mengubah ukuran font dasar:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Untuk membuatnya bekerja di Internet Explorer 7 dan Internet Explorer 8 Anda harus menambahkan fallback dengan unit px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Jika Anda mengembangkan dengan Less , Anda dapat membuat mixin yang akan menghitungnya untuk Anda.

Dukungan unit rem - http://caniuse.com/#feat=rem

Solusi "vw" memiliki masalah saat membuka layar yang sangat kecil. Anda dapat mengatur ukuran dasar dan naik dari sana dengan calc ():

font-size: calc(16px + 0.4vw);

Ini sebagian diimplementasikan dalam yayasan 5.

Dalam file _type.scss mereka memiliki dua set variabel header:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Untuk menengah ke atas, mereka menghasilkan ukuran berdasarkan set variabel pertama:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

Dan untuk default-ie layar kecil, mereka menggunakan set variabel kedua untuk menghasilkan CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Anda dapat menggunakan variabel-variabel ini dan menimpa di file SCss kustom Anda untuk mengatur ukuran font untuk ukuran layar masing-masing.

Ukuran font responsif juga dapat dilakukan dengan kode JavaScript ini disebut FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Tipografi web responsif yang terbaik: ukuran font berdasarkan lebar elemen.

Atau kode JavaScript ini disebut FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Membuat ukuran huruf fleksibel. Gunakan plugin ini pada desain responsif Anda untuk mengubah ukuran berdasarkan tajuk berita utama Anda.

Jika Anda menggunakan alat bangun kemudian coba Rucksack.

Jika tidak, Anda dapat menggunakan variabel CSS (properti khusus) untuk dengan mudah mengontrol ukuran font minimum dan maksimum seperti ( demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Saya melihat artikel yang bagus dari CSS-Trik . Ini bekerja dengan baik:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Sebagai contoh:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Kita bisa menerapkan persamaan yang sama ke line-heightproperti untuk mengubahnya dengan browser juga.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Saya baru saja datang dengan ide yang Anda hanya perlu menentukan ukuran font sekali per elemen, tetapi masih dipengaruhi oleh pertanyaan media.

Pertama, saya mengatur variabel "--text-scale-unit" ke "1vh" atau "1vw", tergantung pada viewport menggunakan kueri media.

Kemudian saya menggunakan variabel menggunakan calc () dan nomor multiplikator saya untuk ukuran font:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

Dalam contoh saya, saya hanya menggunakan orientasi viewport, tetapi prinsipnya harus dimungkinkan dengan pertanyaan media.

"FitText" jQuery mungkin adalah solusi header responsif terbaik. Lihat di GitHub: https://github.com/davatron5000/FitText.js

Seperti banyak kerangka kerja, setelah Anda "pergi dari grid" dan menimpa CSS default kerangka kerja, hal-hal akan mulai rusak kiri dan kanan. Kerangka kerja pada dasarnya kaku. Jika Anda menggunakan gaya H1 default Zurb bersama dengan kelas kisi default mereka, maka halaman web akan ditampilkan dengan benar di ponsel (yaitu, responsif).

Namun, tampaknya Anda ingin judul 6.2em yang sangat besar, yang berarti teks harus menyusut agar muat di dalam layar ponsel dalam mode potret. Taruhan terbaik Anda adalah dengan menggunakan plugin jQuery teks responsif seperti FlowType dan FitText . Jika Anda menginginkan sesuatu yang ringan, maka Anda dapat memeriksa plugin jQuery Text Scalable saya:

http://thdoan.github.io/scalable-text/

Penggunaan sampel:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Dalam Sass asli yang sebenarnya (bukan scss) Anda dapat menggunakan mixin di bawah ini untuk secara otomatis mengatur paragraf dan semua judul ' font-size.

Saya suka karena jauh lebih ringkas. Dan lebih cepat mengetik. Selain itu, ia menyediakan fungsionalitas yang sama. Bagaimanapun, jika Anda masih ingin tetap menggunakan sintaks - scss baru, maka silakan ubah konten Sass saya menjadi scss di sini: [CONVERT SASS TO SCSS HERE]

Di bawah ini saya memberi Anda empat mixins Sass. Anda harus menyesuaikan pengaturannya dengan kebutuhan Anda.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Setelah Anda selesai bermain dengan pengaturan, lakukan panggilan pada satu mixin - yaitu: + config-and-run-font-generator () . Lihat kode di bawah dan komentar untuk informasi lebih lanjut.

Saya kira Anda dapat melakukannya secara otomatis untuk kueri media seperti yang dilakukan untuk tag tajuk, tetapi kita semua menggunakan kueri media yang berbeda, jadi itu tidak akan cocok untuk semua orang. Saya menggunakan pendekatan desain mobile-first, jadi ini yang akan saya lakukan. Jangan ragu untuk menyalin dan menggunakan kode ini.

COPY DAN PASTE MIXIN INI KE FILE ANDA:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

KONFIGURASI SEMUA CAMPURAN DENGAN KEBUTUHAN ANDA - MAINKAN! :) DAN KEMUDIAN PANGGILANNYA DI ATAS KODE SASS AKTUAL ANDA DENGAN:

+config-and-run-font-generator()

Ini akan menghasilkan output ini. Anda dapat menyesuaikan parameter untuk menghasilkan set hasil yang berbeda. Namun, karena kita semua menggunakan kueri media yang berbeda, beberapa mixin Anda harus mengedit secara manual (gaya dan media).

CSS GENERASI:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Saya menggunakan kelas-kelas CSS ini, dan mereka membuat teks saya cair pada ukuran layar apa pun:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Ada beberapa cara berikut untuk mencapai hal ini:

1. Gunakan rem untuk mis. 2.3 rem
2. Gunakan em untuk misalnya 2.3em
3. Gunakan% untuk mis 2,3% Selain itu, Anda dapat menggunakan: vh, vw, vmax dan vmin.

Unit-unit ini akan secara otomatis tergantung pada lebar dan tinggi layar.

Anda dapat membuat ukuran font responsif jika mendefinisikannya dalam vw (lebar viewport). Namun, tidak semua browser mendukungnya. Solusinya adalah menggunakan JavaScript untuk mengubah ukuran font dasar tergantung pada lebar browser dan mengatur semua ukuran font dalam%.

Berikut ini adalah artikel yang menjelaskan cara membuat fontsi responsif: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Saya telah menemukan solusi ini, dan ini bekerja sangat baik untuk saya:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Salah satu cara untuk menyelesaikan masalah teks agar terlihat bagus di desktop dan ponsel / tablet adalah dengan memperbaiki ukuran teks ke unit fisik seperti sentimeter fisik atau inci, yang tidak bergantung pada layar PPI (poin per inci).

Berdasarkan jawaban ini , di bawah ini adalah kode yang saya gunakan di akhir dokumen HTML untuk ukuran font responsif:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

Dalam kode di atas item-item dari kelas yang berbeda ditetapkan ukuran font dalam satuan fisik, selama browser / OS dikonfigurasi dengan benar untuk PPI layarnya.

Font unit fisik selalu tidak terlalu besar dan tidak terlalu kecil, asalkan jarak ke layar biasa (jarak baca buku).

Ukuran teks dapat diatur dengan satu vwunit, yang berarti "lebar viewport". Dengan begitu ukuran teks akan mengikuti ukuran jendela browser:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Untuk proyek pribadi saya, saya menggunakan vw dan @meida. Ini bekerja dengan sempurna.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Gunakan persamaan ini:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Untuk apa pun yang lebih besar atau lebih kecil dari 1440 dan 768, Anda bisa memberikannya nilai statis, atau menerapkan pendekatan yang sama.

Kekurangan dengan solusi vw adalah bahwa Anda tidak dapat mengatur rasio skala, katakanlah 5vw pada resolusi layar 1440 mungkin berakhir menjadi ukuran font 60px, ukuran font ide Anda, tetapi ketika Anda mengecilkan lebar jendela ke 768, itu mungkin berakhir menjadi 12px, bukan minimal yang Anda inginkan.

Dengan pendekatan ini, Anda dapat mengatur batas atas dan batas bawah Anda, dan font akan mengatur skala di antaranya.

Kita bisa menggunakan calc () dari css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Rumus matematika adalah calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Saya khawatir tidak ada solusi mudah untuk mengubah ukuran font. Anda dapat mengubah ukuran font menggunakan kueri media, tetapi secara teknis ukurannya tidak akan lancar. Sebagai contoh, jika Anda menggunakan:

@media only screen and (max-width: 320px){font-size: 3em;}

Anda font-sizeakan 3em untuk lebar 300 piksel dan 200 piksel. Tetapi Anda perlu lebih rendah font-sizeuntuk lebar 200px untuk membuat responsif sempurna.

Jadi, apa solusi sebenarnya? Hanya ada satu cara. Anda harus membuat gambar PNG (dengan latar belakang transparan) yang berisi teks Anda. Setelah itu Anda dapat dengan mudah membuat gambar Anda responsif (misalnya: lebar: 35%; tinggi: 28px). Dengan cara ini teks Anda akan sepenuhnya responsif dengan semua perangkat.

Setelah banyak kesimpulan saya berakhir dengan kombinasi ini:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

coba ini

html { font-size: min(max(16px, 4vw), 22px); }

mendapatkannya dari https://css-tricks.com/simplified-fluid-typography/

Ini sesuatu yang bekerja untuk saya. Saya hanya mengujinya di iPhone.

Apakah Anda memiliki h1,, h2atau ptag, letakkan ini di sekitar teks Anda:

<h1><font size="5">The Text you want to make responsive</font></h1>

Ini membuat teks 22pt di desktop dan masih dapat dibaca di iPhone.

<font size="5"></font>