根据屏幕大小调整文本大小

您可以使用新的 css 单位 vw，vh(视口宽度/高度(。

这是一篇有趣的css-tricks文章，向您展示如何使用它们进行排版。

示例：(来自上面的文章(

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

因此，h1 的字体大小为视口宽度的 5.9%。

话虽如此，以上述方式使用视口单位进行font-size是有问题的，因为当视口宽度非常窄时 - 那么渲染的字体大小将变得太小，反之亦然。

为了克服这个问题，我可以推荐使用一种称为流体类型又名CSS锁的技术。

CSS

锁是一种特定类型的 CSS 值计算，其中：

• 有最小值和最大值，
• 和两个断点(通常基于视口宽度(，
• 在这些断点之间，实际值从最小值线性到最大值。

(来自这篇关于CSS锁的文章，其中也非常详细地解释了所涉及的数学。

因此，假设我们要应用上述技术，使得最小字体大小在 600px 或更小的视口宽度下为 16px，并且将线性增加，直到在 1200px 的视口宽度下达到最大 32px。

我们可以使用这个 SASS mixin 为我们完成所有数学运算，以便 CSS 看起来像这样：

div {
  /* linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px  */
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }
  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }
  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}
// Usage:
// ======
// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

代码笔演示

延伸阅读

精确控制响应式排版

使用 CSS 多边形流体尺寸的流体响应式排版

CSS 中的非线性插值

在 CSS 文件中使用媒体设置字体大小

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}
@media(min-width:768px) {
    body {
        font-size: 11px;
    };
}
@media(min-width:992px) {
    body {
        font-size: 12px;
    };
}
@media(min-width:1200px) {
    body {
        font-size: 13px;
    };
}

放弃JavaScript来更改字体大小...像这样在 CSS 文件中以 em 形式指定字体大小。

div{
   font-size:2em;
}

不要使用 javascript 来指定字体大小。CSS为此内置了方法。

您可以将"em"或"%"与字体大小一起使用，以更改与页面和设备尺寸相关的字体大小。

代码示例：

font-size: 3em;
font-size: 10%;

两者都可以。

试试这个，如果有帮助的话(如果你打算使用javascript(http://fittextjs.com/

如果您以%或em为基础设置，浏览器将相应地设置其字体大小。

您可以使用 css 媒体查询来执行此操作。

在媒体查询中，以百分比形式设置正文大小。

例如：CSS

@media screen and (max-width: 1024px) {
   body {
      font-size: 90%;
   }
}
@media screen and (max-width: 1440px) {
   body {
      font-size: 100%;
   }
}

然后在调整浏览器大小时或根据分辨率百分比在要调整字体大小的每个元素上设置字体大小。

例如：如果要在H1上调整字体大小

h1 {
   font-size: 150%;
}

它将按照您想要的方式工作。

不要使用像素，而是使用em，因为它会相应地缩放。

来自维基百科：

在线上，em测量

的使用变得越来越普遍;随着级联样式表(或CSS(的发展，HTML和在线标记中的W3C最佳实践建议现在要求网页基于可扩展的设计，使用相对测量单位(例如em测量(，而不是固定的，如像素("px"(或点。

• 维基百科
• W3

使用 JavaScript 调整字体大小不是一种好的做法。最好使用CSS传统上做到这一点。您可以使用不同的单位(如px，em和%以及rem(根em((在CSS中调整字体的大小。

为了根据屏幕大小调整字体大小，请在 rem 中设置字体大小。或者利用媒体查询为不同的屏幕分辨率设置字体大小。下面是执行此操作的一些示例媒体查询：

@media screen and (max-width: 1024px) {
    #first { font-size: 204px; }
    h2 { font-size: 20px; }
    h1 { font-size: 30px; }
}