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

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

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…

这部分在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文件中重写，为各自的屏幕大小设置字体大小。

在实际的原始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;

}

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

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

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

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

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

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

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

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