我使用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 example page上，标题在压缩和扩展时适应浏览器。
我错过了一些非常明显的东西吗我该如何实现这一目标？
调整浏览器窗口大小时，font-size不会像这样回复。相反，它们会响应浏览器缩放/类型大小设置，例如，如果您在浏览器中同时按下键盘上的ctrl和+。
媒体查询
您必须使用media queries来减少字体大小，以便在开始破坏设计和创建滚动条的某些时间间隔内缩小字体大小。
例如，尝试在底部的CSS中添加它，在设计开始破坏的任何地方更改320px宽度：
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
视口百分比长度
你也可以使用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中修复。
响应字体大小也可以通过这个名为FlowType的javascript来完成：
FlowType - 最好的响应式网页排版：基于元素宽度的字体大小。
或者这个名为FitText的javascript：
FitText - 使字体大小灵活。在响应式设计上使用此插件，可以根据比例调整标题大小。
如果您使用的是构建工具，请尝试使用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);
}
jQuery“FitText”可能是最好的响应式头部解决方案。在Github上查看：https://github.com/davatron5000/FitText.js
与许多框架一样，一旦你“脱离网格”并覆盖框架的默认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>
在实际的原始sass不scss你可以使用下面的mixins自动设置段落和所有标题字体大小。
我喜欢它，因为它更紧凑。并且更快打字。除此之外，它提供相同的功能。无论如何你仍然想要坚持新的语法 - 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（）。请参阅下面的代码和注释以获取更多信息
我想你可以自动进行媒体查询，就像它是为标题标签完成的那样但我们都使用不同的媒体查询，所以它不适合所有人。我使用移动优先设计方法，所以这就是我要做的。随意复制和使用此代码。
复制和粘贴它们混合到您的文件中
=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;
}
如果在vw（视口宽度）中定义字体大小，则可以使字体大小响应。但并非所有浏览器都支持它。解决方案是使用JS根据浏览器宽度更改基本字体大小，并将所有字体大小设置为％。这篇文章描述了如何制作响应式字体：http://wpsalt.com/responsive-font-size-in-wordpress-theme/
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; }
您可以通过以下方式实现此目的：
这些单元将根据屏幕的宽度和高度自动调整大小。
我使用这个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);
}
找到这个解决方案，对我来说工作非常好。
/* 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)));
}
您可以使用视口值而不是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/
解决桌面和移动/平板电脑上文本看起来不错的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这不依赖于屏幕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，就会以物理单位为不同类的项目分配字体大小。物理单位字体总是不是太大而不是太小，只要到屏幕的距离是平常的（书籍阅读距离）。
可以使用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;
}
}
我想出了一个想法，你只需要为每个元素定义一次字体大小，但它仍然受媒体查询的影响。
首先，我根据视口使用media-querys将变量“--text-scale-unit”设置为“1vh”或“1vw”。
然后我使用calc（）的变量和我的乘数的font-size。
/* 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>在我的例子中，我只使用了视口的方向，但是任何媒体查询都应该可以使用原则。
你怎么找到这个想法？
得出很多结论后，我最终得到了这个组合
@media only screen and (max-width: 730px) {
h2{
font-size: 4.3vw;
}
}
我担心在字体大小调整方面没有简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会顺利调整大小。例如，如果您使用：
@media only screen and (max-width: 320px){font-size: 3em;}
对于300px和200px宽度，您的字体大小将为3em。但是你需要较低的字体大小，200px宽度才能做出完美的响应。
那么，真正的解决方案是什么？只有一种方法。您必须创建包含文本的png（具有透明背景）图像。之后，您可以轻松地使图像响应（例如：宽度：35％;高度：28px）。通过这种方式，您的文本将完全响应所有设备。
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
使用这个等式。
对于大于或小于1440和768的任何内容，您可以给它一个静态值，或应用相同的方法。
vw解决方案的缺点是你无法设置缩放比例，比如屏幕分辨率为1440的5vw最终可能是60px字体大小，你的想法字体大小，但是当你将窗口宽度缩小到768时，它可能会结束是12px，而不是你想要的最小值。使用此方法，您可以设置上边界和下边界，字体将在两者之间缩放。
这对我有用。我只在iPhone上测试过它。
无论你有h1，h2或p标签，都可以在你的文字中找到：
<h1><font size="5">The Text you want to make responsive</font></h1>
这会在桌面上呈现22pt文本，并且在iPhone上仍然可读。
<font size="5"></font>
使用CSS media说明符（这是他们[zurb]使用的）用于响应式样式：
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
我一直在努力克服这个问题，并相信我找到了一个解决方案：
如果您可以为IE9 +和支持CSS calc（），rem单位和vmin单位的所有其他现代浏览器编写应用程序，则可以使用它来实现无媒体查询的可扩展文本：
body {
font-size: calc(0.75em + 1vmin);
}
如果您不介意使用jQuery解决方案，可以尝试使用TextFill插件
jQuery TextFill调整文本大小以适应容器，并使字体大小尽可能大。
有几种方法可以实现这一目标
使用媒体查询但需要多个断点的字体大小
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
使用％或em中的维度。只需更改基本字体大小，一切都会改变。与之前的版本不同，您可以随时更改正文字体而不是h1，或者将基本字体大小设置为默认设备并将其全部放在em中
CSS3支持相对于视口的新维度。但这在android中不起作用
body
{
font-size: 3.2vw;
}
还有另一种响应字体大小的方法 - 使用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
进入非常小的屏幕时，“vw”解决方案存在问题。您可以使用calc（）设置基本大小并从那里上移：
font-size: calc(16px + 0.4vw);
这部分是在基金会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文件中使用这些变量和覆盖来设置各个屏幕大小的字体大小