响应字体大小-Java 学习之路

293

我使用Zurb Foundation 3网格创建了一个站点 . 每个页面都有一个大的h1 .

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div><!-- End Tagline -->
</div><!-- End Row -->

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

我注意到在Zurb Foundation 3 Typography example page上， Headers 在压缩和扩展时适应浏览器 .

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

22 回答

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

Media Queries

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

例如，尝试在底部的CSS中添加它，在设计开始破坏的任何地方更改320px宽度：
```
@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}
```
Viewport percentage lengths

您还可以使用viewport percentage lengths，例如 vw ， vh ， vmin 和 vmax . 官方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中修复 .
回复于 2024-05-07T17:09:10+08:00
6
您可以使用视口值而不是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/
回复于 2024-05-07T17:09:10+08:00

255

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

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

回复于 2024-05-07T17:09:10+08:00

1

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

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

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

回复于 2024-05-07T17:09:10+08:00
0
我一直在努力克服这个问题，并相信我找到了一个解决方案：

如果您可以为IE9和支持CSS calc（），rem单位和vmin单位的所有其他现代浏览器编写应用程序，则可以使用它来实现无媒体查询的可扩展文本：
```
body {
  font-size: calc(0.75em + 1vmin);
}
```
这是它的实际应用：http://codepen.io/csuwldcat/pen/qOqVNO
回复于 2024-05-07T17:09:10+08:00
-1
有几种方法可以实现这一目标

使用 media query 但需要多个断点的字体大小
```
body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}
```
在 % or em 中使用尺寸 . 只需更改基本字体大小，一切都会改变 . 与之前的版本不同，您可以随时更改正文字体而不是h1，或者将基本字体大小设置为默认设备并将其全部放在em中
- “Ems” (em) ：“em”是一个可扩展的单位 . em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt . Ems本质上是可扩展的，所以2em等于24pt，.5em等于6pt等 .
- Percent (%) ：百分比单位与“em”单位非常相似，除了一些基本差异 . 首先，当前的字体大小等于100％（即12pt = 100％） . 使用百分比单位时，您的文本仍然可以完全扩展到移动设备和可访问性 .
见kyleschaeffer.com/....

CSS3 支持相对于视口的新维度 . 但这在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.com/....并查看caniuse.com/....
回复于 2024-05-07T17:09:10+08:00

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

回复于 2024-05-07T17:09:10+08:00

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

回复于 2024-05-07T17:09:10+08:00

8
进入非常小的屏幕时，“vw”解决方案存在问题 . 您可以使用calc（）设置基本大小并从那里上移：
```
font-size: calc(16px + 0.4vw);
```
回复于 2024-05-07T17:09:10+08:00
29
响应字体大小也可以通过这个名为 FlowType 的javascript来完成：
- http://simplefocus.com/flowtype/
- https://github.com/simplefocus/FlowType.JS
FlowType - Responsive web typography at its finest: font-size based on element width.

或者这个javascript叫做 FitText ：
- http://fittextjs.com/
- https://github.com/davatron5000/FitText.js
FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
回复于 2024-05-07T17:09:10+08:00

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

回复于 2024-05-07T17:09:10+08:00

8

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

回复于 2024-05-07T17:09:10+08:00
598
与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情将开始左右突破 . 框架本质上是僵化的 . 如果您使用Zurb的默认H1样式及其默认网格类，则网页应在移动设备上正确显示（即响应） .

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

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

样品用法：
```
<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>
```
回复于 2024-05-07T17:09:10+08:00

在实际的原始sass不scss你可以使用下面的mixins自动设置段落和所有 Headers 字体大小 .

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

下面我给你四个sass mixins . 您必须根据需要调整其设置 .

=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() . 请参阅下面的代码和注释以获取更多信息

我想你可以自动进行媒体查询，就像它是为 Headers 标签完成的那样但我们都使用不同的媒体查询，所以它不适合所有人 . 我使用移动优先设计方法，所以这就是我要做的 . 随意复制和使用此代码 .

复制和粘贴它们混合到您的文件中

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

}

回复于 2024-05-07T17:09:10+08:00

14

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

回复于 2024-05-07T17:09:10+08:00

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

回复于 2024-05-07T17:09:10+08:00

5
您可以通过以下方式实现此目的：
- 使用rem例如2.3 rem
- 使用例如em 2.3em
- 使用％表示例如2.3％此外，您可以使用：vh，vw，vmax和vmin .
这些单元将根据屏幕的宽度和高度自动调整大小 .
回复于 2024-05-07T17:09:10+08:00

I use this CSS classes, make my text fluid on any screen size:

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

回复于 2024-05-07T17:09:10+08:00

0
得出很多结论后，我最终得到了这个组合
```
@media only screen and (max-width: 730px) {

 h2{
        font-size: 4.3vw;
    }

}
```
回复于 2024-05-07T17:09:10+08:00
1
我担心在字体大小调整方面没有简单的解决方案 . 您可以使用媒体查询更改字体大小，但从技术上讲，它不会顺利调整大小 . 例如，如果您使用：
```
@media only screen and (max-width: 320px){font-size: 3em;}
```
对于300px和200px宽度，您的字体大小将为3em . 但是你需要较低的字体大小，200px宽度才能做出完美的响应 .

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

找到这个解决方案，对我来说工作非常好 .

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

回复于 2024-05-07T17:09:10+08:00

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

无论您是否有 h1 ， h2 或 p 标记，请将其放在您的文字周围：
```
<h1><font size="5">The Text you want to make responsive</font></h1>
```
这会在桌面上呈现22pt文本，并且在iPhone上仍然可读 .
```
<font size="5"></font>
```
回复于 2024-05-07T17:09:10+08:00

响应字体大小

22 回答

相关问题