响应式字体大小

我使用Zurb Foundation 3网格创build了一个站点。 每个页面都有一个很大的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的排版示例页面上 ，标题与压缩和扩展的浏览器相适应。

我错过了一些非常明显的东西吗 我如何做到这一点？

Answer 1

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

媒体查询

你将不得不看看使用媒体查询来减less字体大小在一定的时间间隔开始打破你的devise和创build滚动条。

例如，尝试在底部的CSS中添加这个，为devise开始打破的地方改变320px宽度：

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

视口百分比长度

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

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

再次，从相同的W3C文档中，每个单元可以定义如下：

vw单位 – 等于初始包含块的宽度的1％。

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

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

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

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

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

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

Answer 2

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

Answer 3

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

 @media only screen and (max-width: 767px) { h1 { font-size: 3em; } h2 { font-size: 2em; } } 

Answer 4

如果你不介意使用jQuery解决scheme，你可以尝试TextFill插件

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

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

Answer 5

我一直在玩弄克服这个问题的方法，并相信我find了一个解决scheme：

如果您可以为IE9 +以及所有支持CSS calc（），rem单位和vmin单位的所有其他现代浏览器编写应用程序，则可以使用此应用程序实现无媒体查询的可缩放文本：

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

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

Answer 6

有几种方法来实现这一点

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

 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等于当前字体大小，例如，如果文档的font-size是12pt，则1em等于12pt。 Ems在本质上是可扩展的，所以2em等于24pt，.5em等于6pt等。
2. 百分比（％） ：百分比单位非常像“em”单位，除了一些基本的差异。 首先，当前字体大小等于100％（即12pt = 100％）。 在使用百分比单位的同时，您的文字仍可完全扩展至移动设备和辅助function。

见kyleschaeffer.com / ….

CSS3支持与视图端口相关的新维度。 但是这在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-tricks.com / ….也看看caniuse.com / ….

Answer 7

这部分是在基金会5中实施的。

在_type.scss中它们有两个头部variables集合

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

对于中等，他们根据第一组variables生成大小。

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

而对于默认 – 即小屏幕，他们使用第二组variables来生成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; } 

您可以使用这些variables并在自定义scss文件中覆盖，以设置各个屏幕大小的字体大小

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

为了使这个工作在IE7-8中，你将不得不添加一个px单元的回退：

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

如果你正在用LESS开发，你可以创build一个mixin来为你做math。

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

Answer 9

响应字体大小也可以用这个称为FlowType的 JavaScript 完成 ：

• http://simplefocus.com/flowtype/
• simplefocus/FlowType.html

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

或者这个叫做FitText的 javascript：

• http://fittextjs.com/
• davatron5000/FitText.html

FitText – 使字体大小更加灵活。 在您的响应式devise中使用此插件，以便按比例调整您的标题大小。

Answer 10

如果您正在使用构build工具，然后尝试背包。

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

Answer 11

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

Answer 12

进入非常小的屏幕时，“vw”解决scheme有问题。 你可以设置基本大小，并从那里用calc（）：

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

Answer 13

和许多框架一样，一旦你“离开了网格”并且重写了框架的默认CSS，事情就会开始左右摇摆。 框架固有地僵化。 如果您要使用Zurb的默认H1风格以及默认的网格类，那么网页应该在移动设备上正确显示（即响应）。

不过，看起来你需要非常大的6.2em标题，这意味着文本将不得不缩小，以适应纵向模式的移动显示。 你最好的select是使用一个响应式的文本jQuery插件，如FlowType和FitText 。 如果你想要轻量级的东西，那么你可以查看我的可伸缩文本jQuery插件：

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

示例用法：

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

Answer 14

我害怕字体大小。 您可以使用媒体查询更改字体大小。 但从技术上讲，这将不会顺利进行。 举个例子：如果你使用

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

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

那么，什么才是真正的解决scheme呢？ 只有一个办法。 你必须创build一个包含你的文本的PNG（带空白背景）图像。 之后，您可以轻松地使图像响应（例如：宽度：35％;高度：28像素）。 通过这种方式，您的文本将完全响应所有设备。

Answer 15

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

Answer 16

在实际的原始sass不scss中，您可以使用下面的mixin自动设置段落和所有hedings font-size。

我喜欢它，因为它更紧凑。 而且键入的速度更快。 除此之外，它提供相同的function。 无论如何，如果你仍然想要新的语法 – scss然后随意把我的sass转换成scss在这里： [转换SASS到SCSS这里]

下面我给你四个混蛋。 你将不得不根据你的需要来设置他们的设置。

 =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（） 。 看到下面的代码和评论的更多信息。

我觉得你可以自动为媒体查询这样做heder标签，但我们都使用不同的媒体查询，所以它不适合每个人。 我使用移动的第一个devise方法，所以这是我将如何做到这一点。 随意复制并使用此代码。

复制并粘贴到你的文件的混合

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

PRECONFIGUR所有混合到您的需求 – 与它一起玩！ :)然后打电话给您的实际的SASS代码的顶部与：

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

这会产生这个输出。 您可以自定义参数来生成不同的结果集，但是因为我们都使用不同的媒体查询一些mixin，所以您必须编辑manualy（样式和媒体）。

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

得出了很多结论后，我结束了这个组合

 @media only screen and (max-width: 730px) { h2{ font-size: 4.3vw; } } 

Answer 18

  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 19

这是为我工作的东西。 我只在iPhone上testing过。

无论你有h1 ， h2还是p标签，都会在你的文字中出现：

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

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

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