CSS中的自适应字体大小

有以下几种方法可以实现此目的：

1. 使用rem例如2.3 rem
2. 使用em例如2.3em
3. 使用％表示例如2.3％。此外，您可以使用vh，vw，vmax和vmin。

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

如果在vw（视口宽度）中定义字体大小，则可以使其具有响应性。但是，并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器的宽度更改基本字体大小，并将所有字体大小设置为％。

这是一篇介绍如何制作自适应字体大小的文章：http ://wpsalt.com/sensitive-font-size-in-wordpress-theme/

在实际的原始Sass（不是scss）中，您可以使用下面的mixins自动设置段落的标题和所有标题font-size。

我喜欢它，因为它更紧凑。而且输入速度更快。除此之外，它提供了相同的功能。无论如何，如果您仍要坚持使用新语法-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

After you finish playing with settings just make a call on one mixin - which is: +config-and-run-font-generator(). See code below and comments for more information.

I guess you could do it automatically for a media query like it is done for header tags, but we all use different media queries, so it would not be appropriate for everyone. I use a mobile-first design approach, so this is how I would do that. Feel free to copy and use this code.

COPY AND PASTE THESE MIXINS TO YOUR FILE:

=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

CONFIGURE ALL MIXINS TO YOUR NEEDS - PLAY WITH IT! :) AND THEN CALL IT ON THE TOP OF YOUR ACTUAL SASS CODE WITH:

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

This would generate this output. You can customize parameters to generate different sets of results. However, because we all use different media queries, some mixins you will have to edit manually (style and media).

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

}

我使用这些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);
}

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

首先，根据使用媒体查询的视口，将变量“ --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>

在我的示例中，我仅使用了视口的方向，但是该原理对于任何媒体查询都应该可行。

jQuery的“ FitText”可能是最佳的响应头解决方案。在GitHub上检查一下：https : //github.com/davatron5000/FitText.js

如果您使用的是构建工具，请尝试使用背包。

否则，您可以使用CSS变量（自定义属性）轻松控制最小和最大字体大小，例如（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);
}

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

我们可以对line-height属性应用相同的方程式，以使其随浏览器一起更改。

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

也可以使用以下称为FlowType的 JavaScript代码来完成响应字体大小：

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

FlowType-最佳响应式Web排版：基于元素宽度的字体大小。

或此JavaScript代码称为FitText：

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

FitText-使字体大小灵活。在响应式设计中使用此插件可按比例调整标题的大小。

这在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;

对于中等尺寸，它们根据第一组变量生成尺寸：

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

对于默认屏幕（即小屏幕），它们使用第二组变量来生成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文件中覆盖以设置各个屏幕尺寸的字体大小。

当转到非常小的屏幕时，“ vw”解决方案存在问题。您可以设置基本大小并使用calc（）从那里开始：

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

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

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

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

还有另一种响应字体大小的方法-使用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;
    }
}

要在Internet Explorer 7和Internet Explorer 8中实现此功能，您将必须添加一个以px为单位的后备广告：

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

如果您正在使用Less进行开发，则可以创建一个mixin来为您做数学运算。

雷姆单位支持-http: //caniuse.com/#feat=rem

您可以使用视口值来代替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技巧：视口大小的版式

我一直在研究克服此问题的方法，并相信已经找到了解决方案：

如果您可以为Internet Explorer 9（和更高版本）以及所有其他支持CSS calc（），rem单位和vmin单位的其他现代浏览器编写应用程序。您可以使用它来实现可缩放的文本，而无需媒体查询：

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

它正在起作用：http : //codepen.io/csuwldcat/pen/qOqVNO

使用CSS media说明符（即[zurb]所使用的）进行响应式样式：

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}