CSS中的响应字体大小

Question

我已经使用Zurb Foundation 3网格创建了一个站点。 每个页面都有一个大的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 -->

当我将浏览器调整为移动大小时，大字体不会调整并导致浏览器包含水平滚动以适应大文本。

我注意到在Zurb Foundation 3 Typography示例页面上，标头在压缩和扩展时会适应浏览器。

我错过了一些非常明显的东西吗？ 我如何实现这一目标？

Answer 1

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

Answer 2

调整浏览器窗口大小时， font-size不会像这样响应。 相反，它们响应浏览器缩放/文字大小设置，例如，如果您在浏览器中同时按键盘上的Ctrl和+ 。

媒体查询

您将不得不考虑使用媒体查询以在某些时间间隔内减小字体大小，从而开始破坏您的设计并创建滚动条。

例如，尝试在底部的 CSS 中添加它，更改 320 像素宽度以适应您的设计开始破坏的位置：

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

您还可以使用视口百分比长度，例如vw 、 vh 、 vmin和vmax 。 为此，W3C 官方文档指出：

视口百分比长度与初始包含块的大小有关。 当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

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

vw unit - 等于初始包含块宽度的 1%。

vh unit - 等于初始包含块高度的 1%。

vmin 单位 - 等于 vw 或 vh 中的较小者。

vmax unit - 等于 vw 或 vh 中的较大者。

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

.text {
  font-size: 3vw;
}

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

兼容性比较好，可以看这里。 但是，某些版本的 Internet Explorer 和 Edge 不支持 vmax。 此外，iOS 6 和 7 的 vh 单元存在问题，该问题已在 iOS 8 中修复。

Answer 3

我一直在寻找克服这个问题的方法，并且相信我已经找到了解决方案：

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

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

这是在行动： http : //codepen.io/csuwldcat/pen/qOqVNO

Answer 4

使用 CSS media说明符（这就是他们 [zurb] 使用的）进行响应式样式：

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Answer 5

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

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

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

Answer 6

我可以说我的方法是解决您问题的最佳方法

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

这里clamp有3个参数。

第一个是允许的最小字体大小。
第三个是允许的最大字体大小。
第二个参数是您希望始终拥有的字体大小。 它的单位必须是相对的（vw、vh、ch）而不是绝对的（即不是 px、mm、pt）。 相对单位将使其尺寸随着屏幕尺寸的变化而变化。

考虑一个例子：考虑有一个你想要动态调整大小的大字体图标（响应式图标）

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

这里 80vw 是首选的字体大小。
15 rem 是最小字体大小。
80vh 是最大字体大小。

IE

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

上面那些人建议的方法总是有一些不确定的结果......就像我们只使用vw ，字体大小有时可能太大或太小（无界）。

可以使用media查询，但您必须使用至少 3 个媒体查询来限制字体大小

Answer 7

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

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

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) ：“em”是一个可扩展的单位。 一个em等于当前的font-size，比如文档的font-size是12pt，1em就等于12pt。 em 本质上是可扩展的，所以 2 em 等于 24 pt，0.5 em 等于 6 pt，等等。
百分比 (%) ：百分比单位很像“em”单位，除了一些基本差异。 首先，当前字体大小等于 100%（即 12 pt = 100%）。 在使用百分比单位时，您的文本对于移动设备和可访问性保持完全可扩展。

请参阅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 中的较大者
```
body { font-size: 3.2vw; }
```

参见CSS-Tricks ...并查看Can I Use ...

Answer 8

还有另一种响应字体大小的方法 - 使用 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 来为您进行数学计算。

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

Answer 9

“vw”解决方案在转到非常小的屏幕时会出现问题。 您可以设置基本大小并使用 calc() 从那里开始：

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

Answer 10

这在基础 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 文件中使用这些变量和覆盖来设置相应屏幕尺寸的字体大小。

Answer 11

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

Answer 12

响应式字体大小也可以使用这个名为FlowType 的JavaScript 代码来完成：

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

或者这个名为FitText 的JavaScript 代码：

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

Answer 13

如果您使用的是构建工具，请尝试 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);
}

Answer 14

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

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

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

Answer 15

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

Answer 16

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

我喜欢它，因为它更紧凑。 并且打字更快。 除此之外，它提供相同的功能。 无论如何，如果你仍然想坚持使用新的语法——scss，那么你可以在这里将我的 Sass 内容转换为 scss： [CONVERT SASS TO SCSS HERE]

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

=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() 。 有关更多信息，请参阅下面的代码和注释。

我想您可以像对标题标签那样自动为媒体查询执行此操作，但我们都使用不同的媒体查询，因此它并不适合所有人。 我使用移动优先的设计方法，所以我会这样做。 随意复制和使用此代码。

将这些混合复制并粘贴到您的文件中：

=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

根据您的需要配置所有混合 - 玩它！ :) 然后在你的实际 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;

}

Answer 17

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

Answer 18

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

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

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

代码笔

Answer 19

尝试将其包含在您的样式表中：

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

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

Answer 20

与许多框架一样，一旦你“脱离网格”并覆盖框架的默认 CSS，事情就会开始左右混乱。 框架本质上是刚性的。 如果您要使用 Zurb 的默认 H1 样式以及它们的默认网格类，那么网页应该可以在移动设备上正确显示（即响应式）。

但是，您似乎需要非常大的 6.2em 标题，这意味着文本必须缩小以适合纵向模式下的移动显示器。 最好的办法是使用响应式文本 jQuery 插件，例如FlowType和FitText 。 如果你想要轻量级的东西，那么你可以查看我的 Scalable Text jQuery 插件：

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

示例用法：

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

Answer 21

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

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

Answer 22

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

Answer 23

您可以通过以下方式实现这一点：

使用 rem 例如 2.3 rem
使用 em 例如 2.3em
使用 % 例如 2.3% 此外，您可以使用：vh、vw、vmax 和 vmin。

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

Answer 24

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

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

Answer 25

解决文本在桌面和移动/平板电脑上看起来都很好的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这不依赖于屏幕 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>

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

一个物理单位的字体总是不会太大也不会太小，只要到屏幕的距离是正常的（书本阅读距离）。

Answer 26

文本大小可以使用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;
    }
}

Answer 27

使用这个等式：

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

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

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

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

Answer 28

经过多次结论后，我最终得到了这种组合：

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

    h2 {
        font-size: 4.3vw;
    }
}

Answer 29

很多答案，但我没有看到有人提到 min 或 max 函数与媒体查询相结合

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

Answer 30

通过使用 CSS，字体大小会根据屏幕大小而变化。您可以看到这个 H1 标签是响应式的。 （如果我错了纠正我）

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

Answer 31

我认为这可以完成以下工作：

3.3vw 表示视口宽度的 3.3%，

随着屏幕尺寸的变化，这将始终响应。

h1{
  font-size: 3.3vw;
}

Answer 32

设置您的基本字体大小并使用夹功能将其夹住。

使用clamp() 作为字体大小，如在这些示例中，允许您设置随视口大小而增长的字体大小，但不会低于最小字体大小

[https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()][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);
}

Answer 33

我已经使用Zurb Foundation 3网格创建了一个站点。 每个页面都有一个很大的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 -->

当我将浏览器调整为移动尺寸时，大字体不会调整并导致浏览器包含水平滚动以适应大文本。

我注意到在Zurb Foundation 3 Typography示例页面上，标题在压缩和扩展时适应浏览器。

我错过了一些非常明显的东西吗？ 我如何实现这一目标？

Answer 34

我已经使用Zurb Foundation 3网格创建了一个站点。 每个页面都有一个很大的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 -->

当我将浏览器调整为移动大小时，大字体不会调整，并导致浏览器包含水平滚动条以适应大文本。

我注意到在Zurb Foundation 3 Typography示例页面上，标题在压缩和扩展时适应浏览器。

我是否真的缺少明显的东西？ 我该如何实现？

CSS中的响应字体大小

问题描述

33 个解决方案

解决方案1
649 2013-05-06 01:01:49

解决方案2
322 已采纳 2013-03-26 23:26:17

解决方案3
59 2015-09-27 06:40:20

解决方案4
35 2013-03-26 23:26:45

解决方案5
29 2013-03-27 20:22:12

解决方案6
27 2020-07-09 06:09:24

解决方案7
18 2014-02-24 07:47:32

解决方案8
14 2014-01-24 11:23:26

解决方案9
12 2017-10-05 13:26:17

解决方案10
10 2014-11-06 09:13:59

解决方案11
9 2019-07-20 04:56:49

解决方案12
7 2016-01-21 11:22:27

解决方案13
7 2016-11-26 13:43:56

解决方案14
5 2019-01-27 19:47:50

解决方案15
4 2013-11-24 07:32:00

解决方案16
3 2016-02-27 02:15:40

解决方案17
3 2018-10-24 07:04:22

解决方案18
3 2020-04-02 17:23:07

解决方案19
3 2020-05-13 05:20:20

解决方案20
2 2014-03-05 10:35:31

解决方案21
2 2015-08-18 21:50:26

解决方案22
2 2016-04-27 20:54:27

解决方案23
2 2017-12-13 02:09:22

解决方案24
2 2018-12-13 15:57:06

解决方案25
2 2019-01-14 23:26:20

解决方案26
2

解决方案27
2 2019-04-02 04:16:04

解决方案28
1 2016-08-08 16:18:09

解决方案29
1 2021-08-14 00:37:21

解决方案30
0 2021-05-10 14:23:44

解决方案31
0 2021-09-09 04:46:54

解决方案32
0 2021-11-14 23:55:29

解决方案33
-1 2015-01-31 13:35:20

解决方案34
-2 2015-01-29 16:35:50

CSS中的响应字体大小

问题描述

33 个解决方案

解决方案1 649 2013-05-06 01:01:49

解决方案2 322 已采纳 2013-03-26 23:26:17

解决方案3 59 2015-09-27 06:40:20

解决方案4 35 2013-03-26 23:26:45

解决方案5 29 2013-03-27 20:22:12

解决方案6 27 2020-07-09 06:09:24

解决方案7 18 2014-02-24 07:47:32

解决方案8 14 2014-01-24 11:23:26

解决方案9 12 2017-10-05 13:26:17

解决方案10 10 2014-11-06 09:13:59

解决方案11 9 2019-07-20 04:56:49

解决方案12 7 2016-01-21 11:22:27

解决方案13 7 2016-11-26 13:43:56

解决方案14 5 2019-01-27 19:47:50

解决方案15 4 2013-11-24 07:32:00

解决方案16 3 2016-02-27 02:15:40

解决方案17 3 2018-10-24 07:04:22

解决方案18 3 2020-04-02 17:23:07

解决方案19 3 2020-05-13 05:20:20

解决方案20 2 2014-03-05 10:35:31

解决方案21 2 2015-08-18 21:50:26

解决方案22 2 2016-04-27 20:54:27

解决方案23 2 2017-12-13 02:09:22

解决方案24 2 2018-12-13 15:57:06

解决方案25 2 2019-01-14 23:26:20

解决方案26 2

解决方案27 2 2019-04-02 04:16:04

解决方案28 1 2016-08-08 16:18:09

解决方案29 1 2021-08-14 00:37:21

解决方案30 0 2021-05-10 14:23:44

解决方案31 0 2021-09-09 04:46:54

解决方案32 0 2021-11-14 23:55:29

解决方案33 -1 2015-01-31 13:35:20

解决方案34 -2 2015-01-29 16:35:50

解决方案1
649 2013-05-06 01:01:49

解决方案2
322 已采纳 2013-03-26 23:26:17

解决方案3
59 2015-09-27 06:40:20

解决方案4
35 2013-03-26 23:26:45

解决方案5
29 2013-03-27 20:22:12

解决方案6
27 2020-07-09 06:09:24

解决方案7
18 2014-02-24 07:47:32

解决方案8
14 2014-01-24 11:23:26

解决方案9
12 2017-10-05 13:26:17

解决方案10
10 2014-11-06 09:13:59

解决方案11
9 2019-07-20 04:56:49

解决方案12
7 2016-01-21 11:22:27

解决方案13
7 2016-11-26 13:43:56

解决方案14
5 2019-01-27 19:47:50

解决方案15
4 2013-11-24 07:32:00

解决方案16
3 2016-02-27 02:15:40

解决方案17
3 2018-10-24 07:04:22

解决方案18
3 2020-04-02 17:23:07

解决方案19
3 2020-05-13 05:20:20

解决方案20
2 2014-03-05 10:35:31

解决方案21
2 2015-08-18 21:50:26

解决方案22
2 2016-04-27 20:54:27

解决方案23
2 2017-12-13 02:09:22

解决方案24
2 2018-12-13 15:57:06

解决方案25
2 2019-01-14 23:26:20

解决方案26
2

解决方案27
2 2019-04-02 04:16:04

解决方案28
1 2016-08-08 16:18:09

解决方案29
1 2021-08-14 00:37:21

解决方案30
0 2021-05-10 14:23:44

解决方案31
0 2021-09-09 04:46:54

解决方案32
0 2021-11-14 23:55:29

解决方案33
-1 2015-01-31 13:35:20

解决方案34
-2 2015-01-29 16:35:50