CSS中的自适应字体大小


341

我已经使用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 示例页面上,标题在压缩和扩展时适应浏览器。

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


1
在这里看看:仅使用CSS的自适应字体大小https://github.com/pavelkukov/Font-Size-Responsive-CSS演示:http
//fiddle.jshell.net/dgJaK/1/show/

2
我认为第一个链接已过时

天哪,这么多复杂的答案。只需使用css rem即可
ToolmakerSteve

css rem不会根据视口窗口动态调整大小。如果您需要这样做,则需要Javascript或以下纯CSS3答案之一。实际上,只有大标题文本才需要它。
Evan Donovan

@ToolmakerSteve这么说很天真,尤其是在所有设备上都无法响应的问题上。rem根本不是一个好选择,您似乎只是因为它“复杂”而忽略了答案?
Emobe

Answers:


287

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

媒体查询

您将不得不考虑使用媒体查询来按一定的间隔减小字体大小,从而开始破坏设计并创建滚动条。

例如,尝试将其添加到底部的CSS内,在设计开始中断的任何地方更改320像素的宽度:

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

您还可以使用视口百分比长度,例如vwvhvminvmax。W3C的官方文档指出:

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时,将对其进行相应缩放。

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

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

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

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

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

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

.text {
  font-size: 3vw;
}

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

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


44
font-size: 1.5vw;
Dev_NIX

23
更好的是font-size: calc(12px + 1vw)
Cuzox

3

1
我喜欢@Cuzox的建议-这就是我想要的
Eleazar Resendez 18/12/20

@Cuzox您应该提出答案,其他解决方案将测试方法缩小到可以使用这些方法进行有用的处理的程度。当您结合使用这样的静态高度时,它很有用
ricks

616

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


2
我目前仅对Webkit编码-我爱上了这种度量,谢谢
iamwhitebox


19
太好了,我可以使用vw缩放文本,这样在桌面上看起来就显得微不足道了!太好了 h,现在文字太小了,无法在手机上阅读。好的,我可以使用“ max(x,y)”来确保它不会缩小到最小大小以上。太好了 嗯 Chrome似乎不正确支持“ max”。好的,我猜我将再次使用“ px”。
original_username

10
对我来说,这似乎不切实际,因为在移动设备中尺寸变得太小而在高分辨率台式机中尺寸变得太大。
Mr_Green

7
@Mr_Green:这就是您使用媒体查询的原因。在较小的视口中,使字体变大,在较大的视口中,使字体变小。
Alistair

45

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

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

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

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


2
我应该注意,这里的区别是使用calc组合这两个单位是一种在极端情况下帮助消除大众文本比例差异的简便方法。
csuwldcat

视口单元非常适合不需要与旧浏览器兼容的任何项目。这个计算技巧完全符合您的意思,可以平滑缩放文本(与媒体查询设置的严格限制相对),但比屏幕尺寸的更改要小(或更高!)
Ward DS

应该如何使用?我的意思是,如果要更改字体大小,是否应该仅更改em单位,仅更改vmin单位或同时更改两者?
snoob dogg

我是来这里写这个非常简单的解决方案的,但随后看到了您的答案并给出了+1。我们可以将此解决方案应用于每个元素。例如,图像宽度:calc(50px + 10vw)
y.selimdogan

35

使用CSS media说明符(即[zurb]所使用的)进行响应式样式:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}


15

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

使用媒体查询,但是它需要几个断点的字体大小:

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等于当前字体大小,例如,如果文档的字体大小为12 pt,则1 em等于12 pt。Ems本质上是可扩展的,因此2 em等于24 pt,.5 em等于6 pt,依此类推。
  2. 百分比(%):百分比单位与“ em”单位非常相似,除了一些基本差异。首先,当前字体大小等于100%(即12磅= 100%)。使用百分比单位时,您的文本对于移动设备和可访问性仍然可以完全扩展。

kyleschaeffer.com / ....

CSS 3支持相对于视口的新尺寸。但这在Android上不起作用:

  1. 3.2vw =视口宽度的3.2%
  2. 3.2vh =视口高度的3.2%
  3. 3.2vmin =小于3.2vw或3.2vh
  4. 3.2vmax = 3.2vw或3.2vh较大

    body
    {
        font-size: 3.2vw;
    }

请参阅CSS技巧...,另请参阅我可以使用...


13

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


11

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

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

我曾经用过font-size: calc(1.2rem + 1vw)标题。这样,我就具有使用基于非像素的单位的优势(尽管在这里可能不适用)。对于较旧的浏览器,我在纯ems上也有一个回落之处。最后,由于在移动设备上的浏览量有所减少,因此我对它们使用了媒体查询。这可能太复杂了,但似乎可以满足我的要求。
Evan Donovan

8

这在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文件中覆盖来为各个屏幕尺寸设置字体大小。



6

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

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

您是否提到您提到的那个背包
彼得·莫滕森

5

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

有没有一种方法可以使字体大小不大于定义的[maximum-size]?
伊戈尔·扬科维奇(IgorJanković),

4

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

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

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


2
您为什么不简单使用vminvmax不是这项@media业务呢?
Gark Garcia


2

与许多框架一样,一旦“脱离网格”并覆盖框架的默认CSS,事情就会开始左右摇摆。框架本质上是严格的。如果要使用Zurb的默认H1样式及其默认的网格类别,则网页应在移动设备上正确显示(即响应)。

但是,您似乎需要非常大的6.2em标题,这意味着文本必须缩小以适合纵向模式下的移动显示。最好的选择是使用响应文本jQuery插件,例如FlowTypeFitText。如果您想要轻巧的东西,那么可以查看我的可伸缩文本jQuery插件:

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

用法示例:

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

我认为缩放文本/调整文本大小以用于响应式用法应该留给浏览器,特别是对于媒体查询来说,这是他们的目的。
user254197

2

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

完成设置播放后,只需调用一个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

根据您的需要配置所有MIXINS-玩玩吧!:),然后在您的实际SASS代码顶部调用它:

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

这将生成此输出。您可以自定义参数以生成不同的结果集。但是,由于我们都使用不同的媒体查询,因此您必须手动编辑某些混合(样式和媒体)。

生成的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;

}

2

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

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

6
尽管此代码段可以解决问题,但提供说明确实有助于提高您的帖子质量。请记住,您将来会为读者回答这个问题,而这些人可能不知道您提出代码建议的原因。
托尼·巴巴里诺

一个解释将是有条理的。
彼得·莫滕森

1

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

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

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


1

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

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


链接似乎已断开:“ 403 Forbidden。nginx / 1.10.3”
Peter Mortensen19年

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

1

解决文本在台式机和移动/平板电脑上都看起来不错的问题的一种方法是将文本大小固定为物理单位,例如物理厘米或英寸,而这不取决于屏幕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>

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

只要到屏幕的距离是正常的(书本阅读距离),物理单位字体就不会太大也不会太小。



1

使用以下公式:

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

对于大于或小于1440和768的任何值,可以给它提供静态值,也可以应用相同的方法。

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

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


1

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

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

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

码笔


0

恐怕在字体大小调整方面没有简单的解决方案。您可以使用媒体查询来更改字体大小,但是从技术上讲,它的大小不能平滑调整。例如,如果您使用:

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

font-size对于300像素和200像素的宽度,您将均为3em。但是你需要降低font-size 200px的宽度才能做出完美的响应。

那么,真正的解决方案是什么?只有一种方法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后,您可以轻松地使图像响应(例如:宽度:35%;高度:28px)。通过这种方式,您的文本将对所有设备完全响应。


0

经过许多结论,我最终得出了以下结论:

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

    h2 {
        font-size: 4.3vw;
    }
}


-1

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

无论您是否具有h1h2p标记,都将其放置在文本周围:

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

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

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

14
这是2015年。自HTML5起,不推荐使用Font标签。
Dan H

我认为字体标签已过时developer.mozilla.org/zh-CN/docs/Web/HTML/Element/font我不认为它已被弃用,但在某些时候会使用。
杰克2015年

1
@Jake:它已在HTML4中弃用,而在HTML5中已过时。删除是在弃用之后进行,而不是相反。
桑顿
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.