在调整浏览器窗口大小时，字体大小不会像这样响应。相反，它们会对浏览器的缩放/类型大小设置做出响应，比如在浏览器中同时按下键盘上的Ctrl和+。

媒体查询

你必须考虑使用媒体查询来减少字体大小在特定的时间间隔，它开始破坏你的设计和创建滚动条。

例如，试着在你的CSS底部添加这个，在你的设计开始中断的地方改变320像素的宽度:

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

你也可以使用视口百分比长度，如vw, vh, vmin和vmax。官方W3C文档声明:

viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

同样，从同一W3C文档中，每个单独的单元可以定义如下:

vw单位-等于初始包含块宽度的1%。 vh单位-等于初始包含块高度的1%。 vmin单位-等于vw或vh中较小者。 vmax单位-等于vw或vh中较大的一个。

它们的使用方式与其他CSS值完全相同:

.text {
  font-size: 3vw;
}

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

从这里可以看出，兼容性相对较好。但是，某些版本的ie浏览器和Edge浏览器不支持vmax。此外，iOS 6和7的vh单位也有问题，这在iOS 8中得到了修复。

使用CSS媒体说明符(这是他们[zurb]使用的)来进行响应式样式:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

如果你不介意使用jQuery解决方案，你可以尝试TextFill插件

jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。

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

你可以使用viewport值代替ems, pxs或pts:

1vw =视口宽度的1% 1vh =视口高度的1% 1vmin = 1vw或1vh，取较小者 1vmax = 1vw或1vh，取较大者

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

来自CSS-Tricks:视口大小的排版

jQuery的“FitText”可能是最好的响应式头文件解决方案。在GitHub上查看: https://github.com/davatron5000/FitText.js

响应式字体大小还有另一种方法——使用rem单位。

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

在稍后的媒体查询中，您可以通过更改基本字体大小来调整所有字体的大小:

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

为了让这个在ie7和ie8中工作，你必须添加一个以px为单位的回退:

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

如果您正在使用Less进行开发，您可以创建一个mixin，它将为您进行数学计算。

Rem单元支持- http://caniuse.com/#feat=rem

有几种方法可以实现这一点。

使用媒体查询，但它要求几个断点的字体大小:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

使用%或em的尺寸。只要改变基本字体大小，一切都会改变。与前一个不同的是，你可以只改变主体字体，而不是每次都是h1，或者让基本字体大小是设备的默认值，其余都在em中:

“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc.. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

看到kyleschaeffer.com/..。

CSS 3支持相对于视图端口的新维度。但这在Android上行不通:

3.2vw =视口宽度的3.2% 3.2vh =视口高度的3.2% 3.2vmin =小于3.2vw或3.2vh 3.2vmax =大于3.2vw或3.2vh 身体 ｛ 字体大小:3.2大众; ｝

参见CSS-Tricks…再看看Can I Use…

与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类，那么网页应该在移动设备上正常显示(即响应式)。

然而，看起来你想要非常大的6.2em标题，这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件，如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以看看我的可伸缩文本jQuery插件:

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

示例用法:

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

这部分在foundation 5中实现。

在文件_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;

对于medium up，它们根据第一组变量生成大小:

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

对于default-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文件中重写，为各自的屏幕大小设置字体大小。

这是对我有用的方法。我只在iPhone上进行了测试。

无论你有h1, h2或p标签，把它放在你的文本周围:

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

这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。

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

关于字体大小的调整，恐怕没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会平滑地调整大小。举个例子，如果你使用:

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

字体大小为3em，宽度为300像素和200像素。但你需要更低的字体大小为200px宽度，以实现完美的响应。

那么，真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后，你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式，您的文本将与所有设备完全响应。

如果在vw(视口宽度)中定义字体大小，则可以使字体大小具有响应性。然而，并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小，并以%为单位设置所有字体大小。

下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/

我一直在想办法克服这个问题，我相信我已经找到了一个解决方案:

如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本，而不需要媒体查询:

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

这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO

响应式字体大小也可以用这个称为FlowType的JavaScript代码完成:

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

FlowType -响应式网页排版在其最好的:字体大小基于元素宽度。

或者这个叫做FitText的JavaScript代码:

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

FitText -使字体大小灵活。在响应式设计中使用这个插件，根据比例调整标题的大小。

在实际的原始Sass(不是scss)中，你可以使用下面的mixins来自动设置段落和所有标题的字体大小。

我喜欢它，因为它更紧凑。打字也更快。除此之外，它提供了相同的功能。无论如何，如果你仍然想坚持新的语法- scss，那么请随意将我的Sass内容转换为scss: [将sass转换为SCSS]

下面我给你四个Sass mixins。您必须根据需要调整它们的设置。

=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

在你完成设置后，只需对一个mixin进行调用，即:+config-and-run-font-generator()。有关更多信息，请参阅下面的代码和注释。

我猜你可以像处理标题标签一样自动地为媒体查询做这件事，但我们都使用不同的媒体查询，所以它不适合每个人。我使用移动优先的设计方法，所以这就是我如何做到这一点。请随意复制并使用此代码。

复制并粘贴这些mixins到你的文件中:

=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

根据您的需要配置所有的mixin -玩它!:)然后在你实际的sass代码的顶部调用它:

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

这会产生这样的输出。您可以自定义参数以生成不同的结果集。但是，因为我们都使用不同的媒体查询，有些mixin必须手动编辑(样式和媒体)。

生成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;

}

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

在得出许多结论后，我最终得出了以下结论:

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

    h2 {
        font-size: 4.3vw;
    }
}

如果你正在使用一个构建工具，那么试试Rucksack。

否则，你可以使用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);
}

“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:

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

你可以通过以下方法来实现这一点:

用rem表示例如2.3 rem 用em表示例如2.3em 用%表示2.3% 此外，你可以使用: Vh vw vmax vmin。

这些单元将根据屏幕的宽度和高度自动调整大小。

我使用这些CSS类，它们使我的文本在任何屏幕大小上都是流动的:

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

我找到了这个解决方案，对我来说非常有效:

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

解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这与屏幕PPI(每英寸点数)无关。

基于这个答案，下面是我在HTML文档末尾使用的响应式字体大小的代码:

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

在上面的代码中，不同类别的项目以物理单位分配字体大小，只要浏览器/OS为其屏幕的PPI正确配置。

物理单位字体总是不太大也不太小，只要到屏幕的距离是正常的(阅读书籍的距离)。

文本大小可以用vw单位设置，这意味着“视口宽度”。这样，文本大小将跟随浏览器窗口的大小:

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

在我的个人项目中，我使用vw和@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;
    }
}

我刚刚提出了一个想法，每个元素只需定义一次字体大小，但它仍然受到媒体查询的影响。

首先，我设置变量“——text-scale-unit”为“1vh”或“1vw”，这取决于使用媒体查询的视口。

然后我使用calc()变量和我的字体大小乘数:

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

在我的例子中，我只使用了视口的方向，但是这个原则应该适用于任何媒体查询。

用这个等式:

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

对于大于或小于1440和768的任何值，您可以给它一个静态值，或者应用相同的方法。

vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。

使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。

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

我们可以将相同的公式应用于行高属性，使它也随浏览器而改变。

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

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

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

数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))

Codepen

试着在你的样式表中包含以下内容:

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

更多信息请访问https://css-tricks.com/simplified-fluid-typography/

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

这里clamp有三个参数。

第一个是允许的最小字体大小。 第三个是允许的最大字体大小。 第二个参数是您希望始终具有的font-size。它的单位必须是相对的(vw, vh, ch)，而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。

举个例子: 假设有一个很大的fontawesome图标，您想动态调整它的大小(响应式图标)

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

这里80vw是首选的字体大小。 15雷姆是最小字体大小(下界)。 80vh是最大字体大小(上限)。

i.e.

如果在特定的移动屏幕尺寸中，如果80vw < 15rem，则字体大小为15rem。 如果屏幕太宽，那么如果80vw > 80vh，那么字体大小是80vh。

人们提出的上述方法往往效果不确定。就像我们只使用vw时，字体大小有时可能太大或太小(无界)。

@media查询可以使用，但你必须使用至少3个媒体查询，使字体大小响应

字体大小的变化取决于屏幕大小使用CSS，你可以看到这个H1标签是有响应的。(如果我说错了请指正)

@media only screen和(max-width: 1000px) { h1 { 字体大小:5 em; ｝ ｝ @media only screen和(max-width: 500px) { h1 { 字体大小:3他们; ｝ ｝ @media only screen和(max-width: 300px) { h1 { 字体大小:2 em; ｝ ｝ @media only screen和(max-width: 100px) { h1 { 字体大小:1 em; ｝ ｝ 调整浏览器大小!< / h1 >

有很多答案，但我没有看到任何人提到与媒体查询相结合的最小或最大函数

在CSS中有一个max()函数，所以我们上面的例子变成了一行代码:

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

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

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

这与:

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

然后不要忘记将其包装在媒体查询中，并应用于您喜欢的h1,h2,h3,h4,h5,h6。

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

设置你的基本字体大小和夹钳功能。

使用clamp()来设置字体大小，就像在这些例子中一样，允许您设置一个随视口大小而增长的字体大小，但不会低于最小字体大小

夹钳方法MDN文档

这里有一个例子。

h1 {
  font-size: clamp(1.5em, 4vw, 2.5em);
}

h2 {
font-size: clamp(1.2em, 4vw, 2.4em);
}

p {
font-size: clamp(0.6em, 4vw, 1.2em);
}