Ukuran font responsif dalam CSS


341

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?


1
Coba lihat di sini: Hanya Ukuran Huruf Responsif dengan css https://github.com/pavelkukov/Font-Size-Responsive-CSS Demo: http://fiddle.jshell.net/dgJaK/1/show/
pavel

2
Tautan pertama sudah usang saya pikir

OMG, begitu banyak jawaban yang rumit. cukup gunakan css rem .
ToolmakerSteve

css rem tidak mengubah ukuran secara dinamis berdasarkan jendela viewport. Jika Anda perlu melakukannya, maka Anda perlu Javascript atau salah satu jawaban murni CSS3 di bawah ini. Ini benar-benar hanya sesuatu yang Anda butuhkan pada teks judul besar.
Evan Donovan

@ToolmakerSteve Itu adalah hal yang sangat naif untuk mengatakan, terutama dengan masalah menjadi responsif di semua perangkat. rem sebenarnya bukan pilihan yang bagus sekali, Anda sepertinya mengabaikan jawaban karena "rumit"?
Emobe

Jawaban:


287

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.


44
Bagaimana dengan font-size: 1.5vw;?
Dev_NIX

23
Lebih baik lagi,font-size: calc(12px + 1vw)
Cuzox

3
@Dev_NIX Bagaimana dengan itu?
Christiaan Westerbeek

1
Saya menyukai apa yang @Cuzox usulkan - itulah yang saya cari
Eleazar Resendez

@ Cuzox Anda harus menyampaikan bahwa sebagai jawaban, solusi lain membawa jalan tes ke kecil untuk dapat menggunakan metode-metode itu untuk hal-hal yang berguna. Ketika Anda menggabungkan ketinggian statis seperti itu membuatnya berguna
ricks

617

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


2
Saat ini saya hanya
menulis


19
Hebat, saya bisa menggunakan vw untuk skala teks sehingga tidak terlihat kecil di desktop! Sempurna ... Oh. Huh, sekarang teksnya terlalu kecil untuk dibaca ketika dilihat di ponsel. Oke, baik saya bisa menggunakan "max (x, y)" untuk memastikan tidak menyusut melebihi ukuran minimum. Sempurna ... Oh. Hmm. Sepertinya "maks" tidak didukung dengan baik oleh Chrome. Oke, saya kira saya akan menggunakan "px" lagi.
original_username

10
Ini sepertinya tidak praktis bagi saya karena ukurannya menjadi terlalu kecil di ponsel dan terlalu besar di desktop resolusi tinggi.
Mr_Green

7
@ Mr_Green: Itu sebabnya Anda menggunakan kueri media. Pada viewports yang lebih kecil, buat font lebih besar, pada viewports yang lebih besar, buat lebih kecil.
Alistair

45

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


2
Saya harus mencatat bahwa perbedaannya di sini adalah bahwa menggunakan calc untuk menggabungkan dua unit adalah cara mudah untuk membantu meredam varians dalam skala teks vw secara ekstrem.
csuwldcat

unit viewport sangat bagus untuk proyek apa pun yang tidak memerlukan kompatibilitas dengan browser lama. Trik calc ini melakukan persis seperti yang Anda katakan, menskalakan teks dengan lancar (berlawanan dengan batas ketat yang ditentukan oleh kueri media) tetapi dengan rasio yang lebih rendah (atau lebih tinggi!) Daripada perubahan ukuran layar
Ward DS

Bagaimana cara menggunakannya? Maksud saya, jika saya ingin mengubah ukuran font saya, haruskah saya mengubah hanya unit em, hanya unit vmin atau keduanya?
snoob dogg

Saya datang ke sini untuk menulis solusi yang sangat sederhana ini tetapi kemudian melihat jawaban Anda dan memberi +1. Kami dapat menerapkan solusi ini untuk setiap elemen. Misalnya lebar gambar: calc (50px + 10vw)
y.selimdogan

35

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

}


15

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 ...


13

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


11

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

Saya menggunakan font-size: calc(1.2rem + 1vw)heading. Dengan begitu saya mendapat keuntungan menggunakan unit berbasis non-pixel (meskipun itu mungkin tidak berlaku di sini). Saya juga memiliki fallback di ems polos untuk browser yang lebih tua Akhirnya, karena itu menjadi sedikit kecil di ponsel, saya menggunakan permintaan media untuk itu. Itu mungkin terlalu rumit, tetapi tampaknya melakukan apa yang saya inginkan.
Evan Donovan

8

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.


6

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

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

Atau kode JavaScript ini disebut FitText :

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


6

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

Apakah Anda memiliki referensi ke ransel yang Anda bicarakan?
Peter Mortensen

5

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

Apakah ada cara untuk membuat ukuran font tidak lebih besar dari [ukuran maksimum] yang ditentukan?
Igor Janković

4

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.


2
Mengapa Anda tidak menggunakan saja vmindan vmaxbukannya @mediabisnis ini ?
Gark Garcia

3

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


2
Ini sepertinya bukan jawaban langsung untuk pertanyaan mengapa font tidak menyesuaikan. Dalam kasus apa pun, hanya tautan yang menjawab tidak dianjurkan di SO. Silakan pertimbangkan untuk menambahkan lebih detail / kode sampel.
Harry

2

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>

Saya pikir penskalaan teks / pengubahan ukuran teks untuk penggunaan responsif harus diserahkan ke browser, terutama untuk pertanyaan media tentang apa mereka dirancang.
user254197

2

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;

}

2

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

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

6
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Tony Babarino

Penjelasan akan diurutkan.
Peter Mortensen

1

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.


1

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/


Tautan itu tampaknya rusak: "403 Forbidden. Nginx / 1.10.3"
Peter Mortensen

1

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

1

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).


1

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

1

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.


1

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


0

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.


0

Setelah banyak kesimpulan saya berakhir dengan kombinasi ini:

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

    h2 {
        font-size: 4.3vw;
    }
}


-1

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>

14
Ini tahun 2015. Tag font sudah tidak digunakan lagi pada HTML5.
Dan H

Saya pikir tag font sudah usang developer.mozilla.org/en-US/docs/Web/HTML/Element/font Saya tidak berpikir itu sudah usang tetapi akan pada beberapa titik.
Jake

1
@ Jake: Sudah usang dalam HTML4 dan dengan HTML5 sudah usang. Penghapusan mengikuti penghentian, bukan sebaliknya.
santon
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.