Kích thước phông chữ đáp ứng trong CSS

Tôi đã tạo một trang web bằng cách sử dụng lưới Zurb Foundation 3 . Mỗi trang có một lớn 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 -->

Khi tôi thay đổi kích thước trình duyệt thành kích thước di động, phông chữ lớn sẽ không điều chỉnh và khiến trình duyệt bao gồm một cuộn ngang để phù hợp với văn bản lớn.

Tôi đã nhận thấy rằng trên Zurb Foundation 3 Typography trang ví dụ , các tiêu đề thích ứng với trình duyệt vì nó được nén và mở rộng.

Tôi có thiếu một cái gì đó thực sự rõ ràng? Làm thế nào để tôi đạt được điều này?

Các font-sizesẽ không đáp ứng như thế này khi thay đổi kích thước cửa sổ trình duyệt. Thay vào đó, họ phản ứng với các cài đặt kích thước thu phóng / loại trình duyệt, chẳng hạn như nếu bạn nhấn Ctrlvà +cùng nhau trên bàn phím khi ở trong trình duyệt.

Truy vấn phương tiện truyền thông

Bạn sẽ phải xem xét việc sử dụng các truy vấn phương tiện để giảm kích thước phông chữ theo các khoảng thời gian nhất định nơi nó bắt đầu phá vỡ thiết kế của bạn và tạo các thanh cuộn.

Ví dụ: thử thêm phần này vào bên trong CSS của bạn ở phía dưới, thay đổi độ rộng 320 pixel cho bất cứ nơi nào thiết kế của bạn bắt đầu bị phá vỡ:

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

   body { 
      font-size: 2em; 
   }

}

Độ dài phần trăm khung nhìn

Bạn cũng có thể sử dụng độ dài tỷ lệ khung nhìn như vw, vh, vminvà vmax. Tài liệu chính thức của W3C cho các trạng thái này:

Độ dài phần trăm khung nhìn liên quan đến kích thước của khối chứa ban đầu. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu bị thay đổi, chúng được chia tỷ lệ tương ứng.

Một lần nữa, từ cùng một tài liệu W3C, mỗi đơn vị riêng lẻ có thể được định nghĩa như sau:

đơn vị vw - Bằng 1% chiều rộng của khối chứa ban đầu.

đơn vị vh - Bằng 1% chiều cao của khối chứa ban đầu.

đơn vị vmin - Bằng với nhỏ hơn của vw hoặc vh.

đơn vị vmax - Bằng với lớn hơn của vw hoặc vh.

Và chúng được sử dụng theo cách chính xác giống như bất kỳ giá trị CSS nào khác:

.text {
  font-size: 3vw;
}

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

Khả năng tương thích là tương đối tốt như có thể được nhìn thấy ở đây . Tuy nhiên, một số phiên bản Internet Explorer và Edge không hỗ trợ vmax. Ngoài ra, iOS 6 và 7 có vấn đề với đơn vị vh, đã được sửa trong iOS 8.

Bạn có thể sử dụng giá trị khung nhìn thay vì ems, px hoặc pts:

1vw = 1% chiều rộng khung nhìn

1vh = 1% chiều cao khung nhìn

1vmin = 1vw hoặc 1vh, tùy theo giá trị nào nhỏ hơn

1vmax = 1vw hoặc 1vh, tùy theo giá trị nào lớn hơn

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

Từ CSS-Tricks: Kiểu chữ có kích thước Viewport

Tôi đã tìm mọi cách để khắc phục vấn đề này và tin rằng tôi đã tìm ra giải pháp:

Nếu bạn có thể viết ứng dụng của mình cho Internet Explorer 9 (và phiên bản mới hơn) và tất cả các trình duyệt hiện đại khác hỗ trợ CSS calc (), đơn vị rem và đơn vị vmin. Bạn có thể sử dụng điều này để đạt được văn bản có thể mở rộng mà không cần truy vấn phương tiện:

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

Đây là hoạt động: http://codepen.io/csuwldcat/pen/qOqVNO

Sử dụng các công mediacụ xác định CSS (đó là những gì họ [zurb] sử dụng) để tạo kiểu đáp ứng:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Nếu bạn không ngại sử dụng giải pháp jQuery, bạn có thể thử plugin TextFill

jQuery TextFill thay đổi kích thước văn bản để vừa với một thùng chứa và làm cho kích thước phông chữ càng lớn càng tốt.

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

Có một số cách để đạt được điều này.

Sử dụng truy vấn phương tiện , nhưng nó yêu cầu kích thước phông chữ cho một số điểm dừng:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

Sử dụng kích thước theo % hoặc em . Chỉ cần thay đổi kích thước phông chữ cơ bản, và mọi thứ sẽ thay đổi. Không giống như trước đây, bạn chỉ có thể thay đổi phông chữ cơ thể chứ không phải h1 mỗi lần hoặc để kích thước phông chữ cơ sở là mặc định của thiết bị và tất cả phần còn lại trong em:

1. Em Em phạm (em) : Em em là một đơn vị có thể mở rộng. Chẳng hạn, một em bằng với cỡ chữ hiện tại, nếu cỡ chữ của tài liệu là 12 pt, thì 1 em bằng 12 pt. Ems có khả năng mở rộng trong tự nhiên, vì vậy 2 em sẽ bằng 24 pt, 0,5 em sẽ bằng 6 pt, v.v.
2. Phần trăm (%) : Đơn vị phần trăm rất giống với đơn vị Emem, tiết kiệm cho một vài khác biệt cơ bản. Đầu tiên và quan trọng nhất, kích thước phông chữ hiện tại bằng 100% (tức là 12 pt = 100%). Trong khi sử dụng đơn vị phần trăm, văn bản của bạn vẫn có thể mở rộng hoàn toàn cho thiết bị di động và khả năng truy cập.

Xem kyleschaeffer.com / ....

CSS 3 hỗ trợ các kích thước mới liên quan đến cổng xem. Nhưng điều này không hoạt động trên Android:

1. 3,2vw = 3,2% chiều rộng của khung nhìn
2. 3,2vh = 3,2% chiều cao của khung nhìn
3. 3.2vmin = Nhỏ hơn 3.2vw hoặc 3.2vh

4. 3.2vmax = Lớn hơn 3.2vw hoặc 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Xem CSS-Tricks ... và cũng xem Tôi có thể sử dụng ...

Có một cách tiếp cận khác về kích thước phông chữ đáp ứng - sử dụng các đơn vị rem.

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Sau này trong các truy vấn phương tiện, bạn có thể điều chỉnh tất cả các kích thước phông chữ bằng cách thay đổi kích thước phông chữ cơ sở:

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

Để làm việc này trong Internet Explorer 7 và Internet Explorer 8, bạn sẽ phải thêm dự phòng với các đơn vị px:

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

Nếu bạn đang phát triển với Ít hơn , bạn có thể tạo một mixin sẽ thực hiện phép toán cho bạn.

Hỗ trợ các đơn vị Rem - http://caniuse.com/#feat=rem

Giải pháp "vw" có vấn đề khi đi đến màn hình rất nhỏ. Bạn có thể đặt kích thước cơ sở và đi lên từ đó với calc ():

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

Điều này được thực hiện một phần trong nền tảng 5.

Trong tệp _type.scss họ có hai bộ biến tiêu đề:

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

Để trung bình, họ tạo kích thước dựa trên bộ biến đầu tiên:

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

Và để mặc định - tức là màn hình nhỏ, họ sử dụng bộ biến thứ hai để tạo 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; }

Bạn có thể sử dụng các biến này và ghi đè trong tệp scss tùy chỉnh của mình để đặt kích thước phông chữ cho kích thước màn hình tương ứng.

Một kích thước phông chữ đáp ứng cũng có thể được thực hiện với mã JavaScript này được gọi là FlowType :

• http://simplef Focus.com/flowtype/
• https://github.com/simplef Focus / FlowType.JS

FlowType - Kiểu chữ web Responsive ở mức tốt nhất: cỡ chữ dựa trên chiều rộng phần tử.

Hoặc mã JavaScript này được gọi là FitText :

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

FitText - Làm cho kích thước phông chữ linh hoạt. Sử dụng plugin này trên thiết kế đáp ứng của bạn để thay đổi kích thước dựa trên tỷ lệ của các tiêu đề.

Nếu bạn đang sử dụng một công cụ xây dựng thì hãy thử Rucksack.

Mặt khác, bạn có thể sử dụng các biến CSS (thuộc tính tùy chỉnh) để dễ dàng kiểm soát kích thước phông chữ tối thiểu và tối đa như vậy ( bản 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);
}

Tôi thấy một bài viết tuyệt vời từ CSS-Tricks . Nó hoạt động tốt:

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

Ví dụ:

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

Chúng ta có thể áp dụng cùng một phương trình cho thuộc line-heighttính để làm cho nó thay đổi với trình duyệt.

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

Tôi vừa nảy ra một ý tưởng mà bạn chỉ phải xác định kích thước phông chữ một lần cho mỗi phần tử, nhưng nó vẫn bị ảnh hưởng bởi các truy vấn phương tiện.

Đầu tiên, tôi đặt biến "--text-scale-unit" thành "1vh" hoặc "1vw", tùy thuộc vào chế độ xem bằng các truy vấn phương tiện.

Sau đó, tôi sử dụng biến bằng calc () và số nhân của tôi cho cỡ chữ:

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

Trong ví dụ của tôi, tôi chỉ sử dụng hướng của chế độ xem, nhưng nguyên tắc nên có thể với bất kỳ truy vấn phương tiện nào.

"FitText" của jQuery có lẽ là giải pháp tiêu đề đáp ứng tốt nhất. Hãy xem thử tại GitHub: https://github.com/davatron5000/FitText.js

Giống như nhiều khung công tác, một khi bạn "tắt lưới" và ghi đè CSS mặc định của khung, mọi thứ sẽ bắt đầu chuyển sang trái và phải. Khung vốn đã cứng nhắc. Nếu bạn đã sử dụng kiểu H1 mặc định của Zurb cùng với các lớp lưới mặc định của chúng, thì trang web sẽ hiển thị đúng trên thiết bị di động (nghĩa là phản hồi nhanh).

Tuy nhiên, có vẻ như bạn muốn các tiêu đề 6.2em rất lớn, điều đó có nghĩa là văn bản sẽ phải co lại để vừa với màn hình di động ở chế độ dọc. Đặt cược tốt nhất của bạn là sử dụng một plugin jQuery văn bản đáp ứng như FlowType và FitText . Nếu bạn muốn một cái gì đó nhẹ, thì bạn có thể kiểm tra plugin jQuery có thể mở rộng của tôi:

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

Sử dụng mẫu:

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

Trong Sass ban đầu thực tế (không phải scss), bạn có thể sử dụng các mixin dưới đây để tự động đặt đoạn văn và tất cả các tiêu đề ' font-size.

Tôi thích nó vì nó nhỏ gọn hơn nhiều. Và nhanh hơn để gõ. Ngoài ra, nó cung cấp các chức năng tương tự. Dù sao, nếu bạn vẫn muốn theo cú pháp mới - scss, thì hãy thoải mái chuyển đổi nội dung Sass của tôi sang scss tại đây: [CHUYỂN ĐỔI SASS ĐẾN SCSS TẠI ĐÂY]

Dưới đây tôi cung cấp cho bạn bốn mixins Sass. Bạn sẽ phải điều chỉnh các thiết lập của họ theo nhu cầu của bạn.

=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

Sau khi bạn chơi xong với các cài đặt, chỉ cần thực hiện cuộc gọi trên một mixin - đó là: + config-and-run-font-Generator () . Xem mã dưới đây và ý kiến ​​để biết thêm thông tin.

Tôi đoán bạn có thể tự động làm điều đó cho một truy vấn phương tiện giống như được thực hiện cho các thẻ tiêu đề, nhưng tất cả chúng ta đều sử dụng các truy vấn phương tiện khác nhau, vì vậy nó sẽ không phù hợp với mọi người. Tôi sử dụng phương pháp thiết kế di động đầu tiên, vì vậy đây là cách tôi sẽ làm điều đó. Hãy sao chép và sử dụng mã này.

SAO CHÉP VÀ TRẢ TIỀN MIXIN ĐẾN FILE CỦA BẠN:

=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

XÁC NHẬN TẤT CẢ MIXIN ĐẾN NHU CẦU CỦA BẠN - CHƠI VỚI NÓ! :) VÀ THÌ GỌI NGAY TRÊN MÃ SỐ SASS THỰC TẾ CỦA BẠN VỚI:

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

Điều này sẽ tạo ra đầu ra này. Bạn có thể tùy chỉnh các tham số để tạo ra các bộ kết quả khác nhau. Tuy nhiên, vì tất cả chúng ta đều sử dụng các truy vấn phương tiện khác nhau, một số mixins bạn sẽ phải chỉnh sửa thủ công (kiểu và phương tiện).

CSS được tạo ra:

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;

}

Tôi sử dụng các lớp CSS này và chúng làm cho văn bản của tôi trôi chảy trên mọi kích thước màn hình:

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

Có những cách sau đây để bạn có thể đạt được điều này:

1. Sử dụng rem cho ví dụ 2,3 rem
2. Sử dụng em cho ví dụ 2.3em
3. Sử dụng% cho ví dụ 2,3% Ngoài ra, bạn có thể sử dụng: vh, vw, vmax và vmin.

Các đơn vị này sẽ tự động kích hoạt tùy thuộc vào chiều rộng và chiều cao của màn hình.

Bạn có thể làm cho kích thước phông chữ đáp ứng nếu xác định nó trong vw (chiều rộng khung nhìn). Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ nó. Giải pháp là sử dụng JavaScript để thay đổi kích thước phông chữ cơ sở tùy thuộc vào độ rộng của trình duyệt và đặt tất cả các kích thước phông chữ theo%.

Dưới đây là một bài viết mô tả cách tạo phông chữ đáp ứng: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Tôi đã tìm thấy giải pháp này và nó hoạt động rất tốt đối với tôi:

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

Một cách để giải quyết vấn đề văn bản trông ổn trên cả máy tính để bàn và thiết bị di động / máy tính bảng là sửa kích thước văn bản thành các đơn vị vật lý như centimet hoặc inch vật lý, không phụ thuộc vào PPI màn hình (điểm trên mỗi inch).

Dựa trên câu trả lời này , bên dưới là mã tôi sử dụng ở cuối tài liệu HTML cho kích thước phông chữ đáp ứng:

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

Trong mã ở trên, các mục của một lớp khác được gán kích thước phông chữ theo đơn vị vật lý, miễn là trình duyệt / HĐH được cấu hình đúng cho PPI của màn hình.

Phông chữ đơn vị vật lý luôn không quá lớn và không quá nhỏ, miễn là khoảng cách đến màn hình là bình thường (khoảng cách đọc sách).

Kích thước văn bản có thể được đặt bằng một vw đơn vị, có nghĩa là "chiều rộng khung nhìn". Bằng cách đó, kích thước văn bản sẽ theo kích thước của cửa sổ trình duyệt:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive bản

Đối với dự án cá nhân của tôi, tôi đã sử dụng vw và @meida. Nó hoạt động hoàn hảo.

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

Sử dụng phương trình này:

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

Đối với bất kỳ thứ gì lớn hơn hoặc nhỏ hơn 1440 và 768, bạn có thể cung cấp cho nó một giá trị tĩnh hoặc áp dụng cùng một phương pháp.

Hạn chế với giải pháp vw là bạn không thể đặt tỷ lệ tỷ lệ, giả sử 5vw ở độ phân giải màn hình 1440 có thể có kích thước phông chữ 60px, kích thước phông chữ ý tưởng của bạn, nhưng khi bạn thu nhỏ chiều rộng cửa sổ xuống 768, nó có thể kết thúc là 12px, không phải là tối thiểu bạn muốn.

Với phương pháp này, bạn có thể đặt ranh giới trên và ranh giới dưới của mình và phông chữ sẽ tự điều chỉnh ở giữa.

Chúng ta có thể sử dụng calc () từ css

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

Công thức toán học là calc (minize + (maxsize - minize) * (100vm - minviewportference) / (maxferenceviewoport - minviewportference)))

Codepen

Tôi e rằng không có bất kỳ giải pháp dễ dàng nào liên quan đến thay đổi kích thước phông chữ. Bạn có thể thay đổi kích thước phông chữ bằng truy vấn phương tiện, nhưng về mặt kỹ thuật, nó sẽ không thay đổi kích thước một cách trơn tru. Ví dụ: nếu bạn sử dụng:

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

của bạn font-sizesẽ là 3em cho cả chiều rộng 300 pixel và 200 pixel. Nhưng bạn cần thấp hơn font-sizecho chiều rộng 200px để đáp ứng hoàn hảo.

Vậy, giải pháp thực sự là gì? Chỉ co một cach duy nhât. Bạn phải tạo một hình ảnh PNG (với nền trong suốt) có chứa văn bản của bạn. Sau đó, bạn có thể dễ dàng làm cho hình ảnh của mình phản hồi nhanh (ví dụ: width: 35%; height: 28px). Bằng cách này, văn bản của bạn sẽ đáp ứng đầy đủ với tất cả các thiết bị.

Sau nhiều kết luận tôi đã kết thúc với sự kết hợp này:

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

    h2 {
        font-size: 4.3vw;
    }
}

thử cái này

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

lấy nó từ https://css-tricks.com/simplified-fluid-typography/

Đây là một cái gì đó làm việc cho tôi. Tôi chỉ thử nghiệm nó trên iPhone.

Cho dù bạn có h1, h2hoặc pcác thẻ đặt điều này xung quanh văn bản của bạn:

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

Điều này làm cho văn bản 22pt trên máy tính để bàn và nó vẫn có thể đọc được trên iPhone.

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