CSS中的响应字体大小

时间：2013-03-26 23:23:14

标签： css responsive-design font-size zurb-foundation em

我使用 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 排版example page上，标题会在压缩和扩展时适应浏览器。

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

32 个答案:

答案 0 :(得分：605)

您可以使用视口值而不是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： http://css-tricks.com/viewport-sized-typography/

答案 1 :(得分：265)

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

媒体查询

您必须使用media queries来减少字体大小，以便在开始破坏设计和创建滚动条的某些时间间隔内缩小字体大小。

例如，尝试在底部的CSS中添加它，在设计开始破坏的地方更改320px宽度：

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

您还可以使用vw，vh，vmin和vmax等viewport percentage lengths。官方W3C文件指出：

  

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

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

  

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

     

vh单位 - 等于初始包含块高度的1％。

     

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

     

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

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

.text {
  font-size: 3vw;
}

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

可见here兼容性相对较好。但是，某些版本的IE和Edge不支持vmax。此外，iOS 6和7还存在vh单元的问题，该单元已在iOS 8中修复。

答案 2 :(得分：35)

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

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

答案 3 :(得分：33)

我一直在努力克服这个问题，并相信我找到了解决方案：

如果你可以为IE9 +以及支持CSS calc（），rem单位和vmin单位的所有其他现代浏览器编写你的应用程序，你可以使用它来实现没有媒体查询的可扩展文本：

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

以下是它的实际应用：http://codepen.io/csuwldcat/pen/qOqVNO

答案 4 :(得分：29)

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

  

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

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

答案 5 :(得分：14)

有几种方法可以实现这个目标

使用媒体查询但需要多个断点的字体大小

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

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

使用％或em 中的维度。只需更改基本字体大小，一切都会改变。与之前的版本不同，您可以随时更改正文字体而不是h1，或者将基本字体大小设置为默认设备并将其全部放在em中

  1. “Ems”（em）：“em”是一个可扩展的单元。 em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。 Ems本质上是可扩展的，所以2em等于24pt，.5em等于6pt等等。
  2. 百分比（％）：百分比单位与“em”单位非常相似，只是存在一些基本差异。首先，当前的字体大小等于100％（即12pt = 100％）。使用百分比单位时，您的文本仍然可以完全扩展到移动设备和可访问性。

    3. 请参阅kyleschaeffer.com/....

    CSS3 支持与视图端口相关的新维度。但这在android

    中不起作用
    1. 3.2vw =视口宽度的3.2％
    2. 3.2vh =视口高度的3.2％
    3. 3.2vmin = 3.2vw或3.2vh
      4. 的较小值

    4. 3.2vmax = 3.2vw或3.2vh

      的较大值 
      body
{
    font-size: 3.2vw;
}

      5. 请参阅css-tricks.com/....并查看caniuse.com/....

答案 6 :(得分：9)

“vw”解决方案在进入非常小的屏幕时会出现问题。您可以使用calc（）：

设置基本大小并从那里开始 
font-size: calc(16px + 0.4vw);

答案 7 :(得分：9)

还有另一种响应字体大小的方法 - 使用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-8中使用此功能，您必须添加带有px单位的后备：

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

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

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

答案 8 :(得分：9)

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

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是最大字体大小。

即

  • 如果在特定的移动屏幕尺寸下，如果80vw <15rem，则字体大小为15rem。

  • 如果屏幕太宽，则如果80vw> 80vh，则字体大小为80vh。

人们建议的上述那些方法总是会产生不确定的结果……就像仅使用vw时，字体大小有时可能太大或太小（无边界）。

使用media查询太老了。

答案 9 :(得分：8)

这部分是在基金会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文件中使用这些变量和覆盖来设置各个屏幕尺寸的字体大小

答案 10 :(得分：6)

还可以使用名为 FlowType 的javascript来响应字体大小：

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

或者这个名为 FitText 的javascript：

FitText - 使字体大小变得灵活。在响应式设计上使用此插件，可以根据比例调整标题大小。

答案 11 :(得分：5)

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

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

答案 12 :(得分：3)

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

答案 13 :(得分：2)

与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情将开始左右突破。框架本质上是僵化的。如果您使用Zurb的默认H1样式及其默认网格类，则网页应在移动设备上正确显示（即响应）。

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

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

样本用法：

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

答案 14 :(得分：2)

在实际原始sass中没有scss你可以使用下面的mixins自动设置段落和所有标题字体大小。

我喜欢它，因为它更紧凑。并且更快打字。除此之外，它提供相同的功能。无论如何你仍然想要坚持新的语法 - scss然后随意将我的sass转换为scss： [CONVERT SASS TO SCSS HERE]

下面我给你四个混音。您必须根据需要调整其设置。

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in 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 place holder 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; 

}

答案 15 :(得分：2)

尝试在样式表中添加它：

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

更多信息，位于https://css-tricks.com/simplified-fluid-typography/

答案 16 :(得分：2)

我们可以使用CSS中的calc（）

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

数学公式是 calc（minsize +（maxsize-minsize）*（100vm-minviewportwidth）/（maxwidthviewoport-minviewportwidth）））

Codepen

答案 17 :(得分：1)

如果以vw（视口宽度）定义字体大小，则可以使字体大小响应。但并非所有浏览器都支持它。解决方案是使用JS根据浏览器宽度更改基本字体大小，并将所有字体大小设置为％。这篇文章描述了如何制作响应式字体：http://wpsalt.com/responsive-font-size-in-wordpress-theme/

答案 18 :(得分：1)

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

答案 19 :(得分：1)

您可以通过以下方式实现此目标：

  1. 使用rem例如2.3 rem
  2. 将em用于例如2.3em
  3. 使用％表示例如2.3％ 而且，你可以使用： vh，vw，vmax和vmin。

    4. 这些单位将根据屏幕的宽度和高度进行自动调整。

答案 20 :(得分：1)

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

答案 21 :(得分：1)

找到了这个解决方案，对我来说很好。

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

答案 22 :(得分：1)

解决文本在台式机和移动设备/平板电脑上都看起来不错的问题的一种方法是将文本大小固定为物理单位，例如物理厘米或英寸，而不依赖于屏幕PPI（每英寸的点数）

基于this answer，以下是我在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正确配置了浏览器/ OS，就以物理单位为不同类别的项目分配了字体大小。只要与屏幕的距离是正常的（书籍阅读距离），物理单位字体就不会太大也不会太小。

答案 23 :(得分：1)

可以使用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;
    }
  }

答案 24 :(得分：1)

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

首先，根据视口，使用媒体查询将变量“ --text-scale-unit”设置为“ 1vh”或“ 1vw”。

然后，我使用calc（）变量和我的乘数作为字体大小。 

/* Define variable based on the orientation. */
/* 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 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>

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

您如何找到这个主意？

答案 25 :(得分：0)

通过使用 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>

答案 26 :(得分：0)

我知道这是一个老问题，我遇到了同样的问题，在谷歌搜索之后，我看到了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)));
}

答案 27 :(得分：0)

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

使用此等式。

对于大于或小于1440和768的任何内容，您可以为其赋予静态值，或应用相同的方法。

大众解决方案的缺点是您无法设置缩放比例，例如在1440屏幕分辨率下的5vw可能会变成60px字体大小，即您的想法字体大小，但是当您将窗口宽度缩小到768时，可能最终为12px，而不是您想要的最小值。通过这种方法，您可以设置上边界和下边界，并且字体会在两者之间进行缩放。

答案 28 :(得分：0)

经过大量结论后，我最终得到了这个组合

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

 h2{
        font-size: 4.3vw;
    }

}

答案 29 :(得分：0)

我担心在字体大小调整方面没有简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会顺利调整大小。例如，如果您使用：

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

300px和200px宽度的字体大小均为3em。但是你需要较低的字体大小，200px宽度才能做出完美的响应。

那么，真正的解决方案是什么？只有一种方法。您必须创建包含文本的png（具有透明背景）图像。之后，您可以轻松地使图像响应（例如：宽度：35％;高度：28px）。通过这种方式，您的文本将完全响应所有设备。

答案 30 :(得分：-1)

这对我有用。我只在iPhone上测试过它。

您是否有h1，h2或p标记将其放在您的文字中：

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

这会在桌面上呈现22pt文本，并且在iPhone上仍然可读。

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

答案 31 :(得分：-2)

只需将单位从px更改为 vw（查看窗口），大​​概为1.5或1.1vw，就可以了

相关问题
最新问题