我已經(jīng)使用Zurb Foundation 3網(wǎng)格創(chuàng)建了一個(gè)站點(diǎn)。每頁(yè)都有一個(gè)大的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 -->

可以使用視口值代替ems、pxs或pts:

1vw =視窗寬度的1%

1vh =視口高度的1%

1vmin = 1vw或1vh，以較小者為準(zhǔn)

1vmax = 1vw或1vh，以較大者為準(zhǔn)

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

來(lái)自CSS-技巧:視窗大小的排版

調(diào)整瀏覽器窗口大小時(shí)，字體大小不會(huì)像這樣響應(yīng)。相反，它們響應(yīng)瀏覽器的縮放/文字大小設(shè)置，例如在瀏覽器中同時(shí)按下鍵盤(pán)上的Ctrl和+鍵。

媒體查詢(xún)

你將不得不考慮使用媒體查詢(xún)來(lái)減少字體大小，在特定的時(shí)間間隔，它開(kāi)始破壞你的設(shè)計(jì)并創(chuàng)建滾動(dòng)條。

例如，試著把它添加到你的CSS底部，改變你的設(shè)計(jì)開(kāi)始中斷的地方的320像素寬度:

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

   body { 
      font-size: 2em; 
   }

}

視口百分比長(zhǎng)度

您也可以使用視口百分比長(zhǎng)度，如vw、vh、vmin和vmax。官方的W3C文檔聲明:

視口百分比長(zhǎng)度相對(duì)于初始包含塊的大小。當(dāng)初始包含塊的高度或?qū)挾劝l(fā)生變化時(shí)，它們會(huì)相應(yīng)地進(jìn)行縮放。

同樣，在同一個(gè)W3C文檔中，每個(gè)單獨(dú)的單元可以定義如下:

vw單位-等于初始包含塊寬度的1%。

vh單位-等于初始包含塊高度的1%。

vmin單位-等于vw或vh中的較小值。

vmax單位-等于vw或vh中的較大值。

它們的使用方式與任何其他CSS值完全相同:

.text {
  font-size: 3vw;
}

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

從這里可以看出，兼容性相對(duì)較好。但是，某些版本的Internet Explorer和Edge不支持vmax。此外，iOS 6和7有一個(gè)vh單元的問(wèn)題，該問(wèn)題在iOS 8中得到修復(fù)。

這里clamp有3個(gè)參數(shù)。

第一個(gè)是允許的最小字體大小。

第三個(gè)是允許的最大字體大小。

第二個(gè)參數(shù)是你希望一直保持的字體大小。其單位必須是相對(duì)的(vw，vh，ch)而不是絕對(duì)的(即不是px，mm，pt)。相對(duì)單元將使其隨著屏幕尺寸的變化而改變尺寸。

考慮一個(gè)例子: 假設(shè)有一個(gè)想要?jiǎng)討B(tài)調(diào)整大小的大字體圖標(biāo)(響應(yīng)圖標(biāo))

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

這里80vw是首選的字體大小。 15雷姆是最小字體大小(下限)。 80vh是最大字體大小(上限)。 即

如果在特定的手機(jī)屏幕尺寸如果80vw & lt那么字體大小就是15雷姆。

如果屏幕太寬，那么如果80vw & gt那么字體大小就是80vh。

人們提出的上述方法，結(jié)果總是有點(diǎn)不確定...就像當(dāng)我們只使用vw時(shí)，字體大小有時(shí)可能太大或太小(無(wú)限制)。

可以使用@媒體查詢(xún)，但您必須至少使用3次媒體查詢(xún)才能使字體大小響應(yīng)

我一直在想辦法克服這個(gè)問(wèn)題，我相信我已經(jīng)找到了一個(gè)解決方案:

如果你能為InternetExplorer9(以及更高版本)和所有其他支持CSS calc()、rem單位和vmin單位的現(xiàn)代瀏覽器編寫(xiě)應(yīng)用程序。您可以使用它來(lái)獲得無(wú)需媒體查詢(xún)的可縮放文本:

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

這就是行動(dòng):http://codepen.io/csuwldcat/pen/qOqVNO

使用CSS媒體說(shuō)明符(這就是他們[zurb]使用的)進(jìn)行響應(yīng)樣式:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

如果你不介意使用jQuery解決方案，你可以試試TextFill插件

jQuery TextFill調(diào)整文本大小以適合容器，并使字體盡可能大。

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

有幾種方法可以實(shí)現(xiàn)這一點(diǎn)。

使用媒體查詢(xún)，但它需要幾個(gè)斷點(diǎn)的字體大小:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

使用%或em表示的尺寸。只要改變基本字體大小，一切都會(huì)改變。與前一個(gè)不同，你可以每次只改變正文字體而不是h1，或者讓基本字體大小成為設(shè)備的默認(rèn)大小，其余的都在em:

“Ems”(em):“em”是一個(gè)可擴(kuò)展的單位。em等于當(dāng)前的字體大小，例如，如果文檔的字體大小是12pt，則1em等于12pt。em本質(zhì)上是可伸縮的，所以2em等于24pt，. 5em等于6pt，等等.. 百分比(%):百分比單位很像“em”單位，除了一些基本的區(qū)別。首先，當(dāng)前字體大小等于100%(即12pt = 100%)。使用百分比單位時(shí)，您的文本對(duì)于移動(dòng)設(shè)備和可訪(fǎng)問(wèn)性保持完全可縮放。 參見(jiàn)kyleschaeffer.com/....

CSS3支持相對(duì)于視口的新尺寸。但這在Android上不起作用:

3.2瓦=視口寬度的3.2% 3.2vh =視口高度的3.2% 3.2 vmin = 3.2 VW或3.2vh中的較小值 3.2最大值= 3.2瓦或3.2瓦時(shí)中的較大值

body
{
    font-size: 3.2vw;
}

參見(jiàn)CSS-技巧...也看看我能不能用...

還有另一種方法來(lái)響應(yīng)字體大小——使用rem單位。

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

稍后在媒體查詢(xún)中，您可以通過(guò)更改基本字體大小來(lái)調(diào)整所有字體大小:

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

要在InternetExplorer7和InternetExplorer8中實(shí)現(xiàn)這一點(diǎn)，您必須添加一個(gè)帶有px單元的后備:

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

如果你用更少的東西開(kāi)發(fā)，你可以創(chuàng)建一個(gè)mixin來(lái)幫你計(jì)算。

Rem單位支持-http://caniuse.com/#feat=rem

“大眾”的解決方案有一個(gè)問(wèn)題時(shí)，去非常小的屏幕。您可以設(shè)置基本大小，然后用calc()從那里開(kāi)始:

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

這在foundation 5中得到部分實(shí)現(xiàn)。

在file _type.scss中，它們有兩組頭變量:

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

對(duì)于中上尺寸，它們根據(jù)第一組變量生成尺寸:

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

對(duì)于默認(rèn)的小屏幕，他們使用第二組變量來(lái)生成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; }

您可以使用這些變量并在您的自定義scss文件中覆蓋，以設(shè)置相應(yīng)屏幕大小的字體大小。

我在CSS-Tricks上看到一篇很棒的文章。它工作得很好:

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

例如:

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

我們可以將相同的公式應(yīng)用于行高屬性，使其也隨著瀏覽器而變化。

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

響應(yīng)的字體大小也可以用這個(gè)名為FlowType的JavaScript代碼來(lái)實(shí)現(xiàn):

http://simplefocus.com/flowtype/ https://github.com/simplefocus/FlowType.射流研究… FlowType - Responsive web排版的最佳表現(xiàn):基于元素寬度的字體大小。

或者這個(gè)叫做FitText的JavaScript代碼:

http://fittextjs.com/ https://github.com/davatron5000/FitText.js FitText -使字體大小靈活。在你的響應(yīng)式設(shè)計(jì)中使用這個(gè)插件來(lái)基于比例調(diào)整標(biāo)題的大小。

如果你使用的是構(gòu)建工具，那么試試背包。

否則，您可以使用CSS變量(自定義屬性)輕松控制最小和最大字體大小，如下所示(演示):

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

我剛剛想到一個(gè)主意，你只需要為每個(gè)元素定義一次字體大小，但是它仍然會(huì)受到媒體詢(xún)問(wèn)的影響。

首先，我將變量“- text-scale-unit”設(shè)置為“1vh”或“1vw”，這取決于使用媒體查詢(xún)的視口。

然后，我使用calc()變量和字體大小的乘數(shù):

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

我使用這些CSS類(lèi)，它們讓我的文本在任何尺寸的屏幕上都很流暢:

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

試著在你的樣式表中包含這個(gè):

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

https://css-tricks.com/simplified-fluid-typography/的更多信息

有以下幾種方法可以實(shí)現(xiàn)這一點(diǎn):

使用雷姆，例如2.3雷姆 使用em，例如2.3em 使用%表示2.3% 此外，您可以使用: vh、vw、vmax和vmin。 這些單元將根據(jù)屏幕的寬度和高度自動(dòng)調(diào)整大小。

jQuery的“FitText”可能是響應(yīng)最好的頭解決方案。請(qǐng)?jiān)L問(wèn)GitHub查看: https://github.com/davatron5000/FitText.js

在實(shí)際的原始Sass(不是scss)中，你可以使用下面的混合來(lái)自動(dòng)設(shè)置段落和所有標(biāo)題的字體大小。

我喜歡它，因?yàn)樗o湊。打字也更快。除此之外，它還提供相同的功能。無(wú)論如何，如果您仍然想堅(jiān)持使用新的語(yǔ)法——scss，那么可以在這里將我的Sass內(nèi)容轉(zhuǎn)換為scss: [此處將薩斯語(yǔ)轉(zhuǎn)換為SCSS語(yǔ)]

下面我給你四個(gè)薩斯mixins。你必須根據(jù)自己的需要調(diào)整它們的設(shè)置。

=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

完成設(shè)置后，只需在一個(gè)mixin上調(diào)用，即:+config-and-run-font-generator()。有關(guān)更多信息，請(qǐng)參見(jiàn)下面的代碼和注釋。

我想你可以像對(duì)header標(biāo)簽?zāi)菢訉?duì)媒體查詢(xún)自動(dòng)執(zhí)行，但是我們都使用不同的媒體查詢(xún)，所以它并不適合每個(gè)人。我使用移動(dòng)優(yōu)先的設(shè)計(jì)方法，所以這是我的做法。請(qǐng)隨意復(fù)制和使用這段代碼。

將這些混音復(fù)制并粘貼到您的文件中:

=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

根據(jù)你的需要配置所有混音——盡情發(fā)揮吧！:)然后在實(shí)際的SASS代碼的頂部調(diào)用它:

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

這將生成以下輸出。您可以自定義參數(shù)以生成不同的結(jié)果集。然而，因?yàn)槲覀兌际褂貌煌拿襟w查詢(xún)，有些混音你必須手動(dòng)編輯(風(fēng)格和媒體)。

生成的CSS:

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;

}

文本大小可以用vw單位設(shè)置，即“視口寬度”。這樣，文本大小將跟隨瀏覽器窗口的大小:

https://www.w3schools.com/howto/tryit.asp? filename = try how _ CSS _ responsive _ text

對(duì)于我的個(gè)人項(xiàng)目，我使用了大眾和@meida。它完美地工作。

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

我們可以使用css中的calc()

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

數(shù)學(xué)公式是 calc(minsize+(maxsize-minsize)*(100 VM-minviewportwidth)/(maxwidthviewoport-minviewportwidth)))

密碼筆

很多答案，但我沒(méi)有看到任何人提到最小或最大函數(shù)與媒體查詢(xún)相結(jié)合

CSS中有一個(gè)max()函數(shù)，所以上面的例子變成了一行代碼:

font-size: max(30vw, 30px);

或者用最小值和最大值加倍:

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

這等同于:

font-size: clamp(16px, 4vw, 22px);

然后，不要忘記將它包含在媒體查詢(xún)中，并根據(jù)您的喜好應(yīng)用到h1、h2、h3、h4、h5、h6。

@media (max-width: 600px) {
      h1 {
           font-size: clamp(16px, 4vw, 22px);
         }
    }

和許多框架一樣，一旦你“脫離網(wǎng)格”并覆蓋了框架的默認(rèn)CSS，事情就會(huì)開(kāi)始變得混亂。框架本質(zhì)上是僵化的。如果你使用Zurb的默認(rèn)H1風(fēng)格和他們的默認(rèn)網(wǎng)格類(lèi)，那么網(wǎng)頁(yè)應(yīng)該可以在手機(jī)上正常顯示(即響應(yīng))。

然而，似乎你想要非常大的6.2em標(biāo)題，這意味著文本將不得不縮小以適合縱向模式下的移動(dòng)顯示器。最好的辦法是使用響應(yīng)性文本jQuery pl ugin，比如FlowType和FitText。如果您想要輕量級(jí)的，那么您可以查看我的可伸縮文本jQuery插件:

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

示例用法:

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

如果在vw(視口寬度)中定義字體大小，您可以使其具有響應(yīng)性。然而，并不是所有的瀏覽器都支持它。解決方案是使用JavaScript根據(jù)瀏覽器寬度改變基本字體大小，并以%為單位設(shè)置所有字體大小。

這里有一篇文章描述了如何制作響應(yīng)式字體大小:http://wpsalt.com/responsive-font-size-in-wordpress-theme/

我發(fā)現(xiàn)了這個(gè)解決方案，它對(duì)我非常有效:

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

解決文本在桌面和移動(dòng)/平板電腦上都好看的問(wèn)題的一種方法是將文本大小固定為物理單位，如物理厘米或英寸，這不取決于屏幕PPI(每英寸點(diǎn)數(shù))。

基于這個(gè)答案，下面是我在HTML文檔末尾使用的代碼，用于響應(yī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>

在上面的代碼中，只要瀏覽器/操作系統(tǒng)針對(duì)其屏幕的PPI進(jìn)行了正確配置，不同類(lèi)的項(xiàng)目就會(huì)以物理單位分配字體大小。

一個(gè)物理單位的字體總是既不太大也不太小，只要到屏幕的距離是正常的(看書(shū)的距離)。

使用以下等式:

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

對(duì)于任何大于或小于1440和768的值，您可以給它一個(gè)靜態(tài)值，或者應(yīng)用相同的方法。

vw解決方案的缺點(diǎn)是你不能設(shè)置縮放比例，比如在屏幕分辨率為1440的情況下，5vw可能最終是60px字體大小，這是你理想的字體大小，但是當(dāng)你將窗口寬度縮小到768時(shí)，它可能最終是12px，不是你想要的最小值。

用這種方法，你可以設(shè)置你的上邊界和下邊界，字體會(huì)在它們之間自動(dòng)縮放。

經(jīng)過(guò)多次總結(jié)，我得出了這樣一個(gè)組合:

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

    h2 {
        font-size: 4.3vw;
    }
}

字體大小的變化取決于屏幕的大小。通過(guò)使用CSS，你可以看到這個(gè)H1標(biāo)簽是有反應(yīng)的。(如果我錯(cuò)了，請(qǐng)糾正我)

@media only screen and (max-width: 1000px) {
     h1 {
         font-size:5em;
    }
}
 @media only screen and (max-width: 500px) {
     h1 {
         font-size: 3em;
    }
}
 @media only screen and (max-width: 300px) {
     h1 {
         font-size: 2em;
    }
}
 @media only screen and (max-width: 100px) {
     h1 {
         font-size: 1em;
    }
}

<h1>Resize the browser!</h1>