我使用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示例页面上，标题会在压缩和扩展时适应浏览器。
我错过了一些非常明显的东西吗？我如何实现这一目标？
您可以使用视口值而不是 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：视口大小的排版
调整浏览器font-size窗口大小时不会这样响应。相反，它们会响应浏览器缩放/字体大小设置，例如，如果您在浏览器中同时按下键盘上的Ctrl和。+
媒体查询
您将不得不考虑使用媒体查询以在某些间隔开始破坏您的设计并创建滚动条时减小字体大小。
例如，尝试在底部的 CSS 中添加它，更改 320 像素的宽度，以适应您的设计开始中断的位置：
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
视口百分比长度
您还可以使用视口百分比长度，例如vw、和。官方的 W3C 文档指出：vhvminvmax
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
同样，从同一个 W3C 文档中，每个单独的单元都可以定义如下：
vw unit - 等于初始包含块宽度的 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 中修复。
我一直在尝试解决这个问题的方法，并相信我找到了解决方案：
如果您可以为 Internet Explorer 9（及更高版本）和所有其他支持 CSS calc()、rem 单位和 vmin 单位的现代浏览器编写应用程序。您可以使用它来实现无需媒体查询的可缩放文本：
body {
font-size: calc(0.75em + 1vmin);
}
使用 CSSmedia说明符（这是他们 [zurb] 使用的）进行响应式样式：
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
我可以说我的方法是解决您问题的最佳方法
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
这里clamp有 3 个论点。
第一个是允许的最小字体大小。
第三个是允许的最大字体大小。
第二个参数是您希望始终拥有的字体大小。它的单位必须是相对的（vw, vh, ch）而不是绝对的（即不是px, mm, pt）。相对单位将使它改变它的大小 wrt 改变屏幕尺寸。
考虑一个例子：考虑有一个你想要动态调整大小的大字体图标（响应式图标）
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
IE
如果在特定的移动屏幕尺寸中，如果 80vw < 15rem，则字体大小为 15rem。
如果屏幕太宽，则如果 80vw > 80vh，则字体大小为 80vh。
人们建议的上述方法总是有一些不确定的结果......就像我们
vw只使用时，字体大小有时可能太大或太小（无界）。
media可以使用查询，但您必须将字体大小与至少 3 个媒体查询绑定
如果您不介意使用 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：
CSS 3支持与视口相关的新尺寸。但这在 Android 上不起作用：
3.2vmax = 3.2vw 或 3.2vh 中的较大者
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;
}
}
要在 Internet Explorer 7 和 Internet Explorer 8 中使用此功能，您必须添加一个带有 px 单位的后备：
h1 {
font-size: 18px;
font-size: 1.125rem;
}
如果您正在使用Less进行开发，您可以创建一个可以为您计算的 mixin。
Rem 单位支持 - http://caniuse.com/#feat=rem
“大众”解决方案在进入非常小的屏幕时会出现问题。您可以设置基本大小并使用 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 文件中覆盖以设置相应屏幕尺寸的字体大小。
我从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)));
}
响应式字体大小也可以使用这个名为FlowType的 JavaScript 代码来完成：
FlowType - 最好的响应式 Web 排版：基于元素宽度的字体大小。
或者这个名为FitText 的JavaScript 代码：
FitText - 使字体大小灵活。在您的响应式设计中使用此插件可根据比例调整标题大小。
如果您使用的是构建工具，请尝试使用 Rucksack。
否则，您可以使用 CSS 变量（自定义属性）轻松控制最小和最大字体大小，如下所示（演示）：
* {
/* 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);
}
我刚刚提出了一个想法，您只需为每个元素定义一次字体大小，但它仍然受到媒体查询的影响。
首先，我将变量“--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>在我的示例中，我只使用了视口的方向，但该原理应该适用于任何媒体查询。
jQuery 的“FitText”可能是最好的响应式标题解决方案。在 GitHub 上查看： https ://github.com/davatron5000/FitText.js
尝试在您的样式表中包含此内容：
html {
font-size: min(max(16px, 4vw), 22px);
}
我使用这些 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);
}
我们可以使用 css 中的 calc()
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数学公式为 calc(minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))
在实际的原始Sass（不是 scss）中，您可以使用以下 mixins 自动设置段落和所有标题font-size。
我喜欢它，因为它更紧凑。而且打字速度更快。除此之外，它提供相同的功能。无论如何，如果你仍然想坚持新的语法 - scss，那么请随意将我的 Sass 内容转换为 scss： [CONVERT SASS TO SCSS HERE]
下面我给你四个 Sass mixin。您将不得不根据您的需要调整它们的设置。
=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
根据您的需要配置所有混合 - 玩它！:) 然后在你的实际 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;
}
与许多框架一样，一旦你“脱离网格”并覆盖框架的默认 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>
解决文本在桌面和移动/平板电脑上看起来不错的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这不依赖于屏幕 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>
在上面的代码中，只要浏览器/操作系统针对其屏幕的 PPI 正确配置，就可以为不同类的项目分配物理单位的字体大小。
物理单位字体总是不会太大也不会太小，只要到屏幕的距离是正常的（阅读距离）。
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; }
使用这个等式：
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
对于大于或小于 1440 和 768 的任何值，您可以给它一个静态值，或者应用相同的方法。
vw 解决方案的缺点是您无法设置缩放比例，例如屏幕分辨率为 1440 的 5vw 最终可能是 60px 字体大小，您的想法字体大小，但是当您将窗口宽度缩小到 768 时，它可能会结束12px，不是你想要的最小值。
使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。
文本大小可以设置一个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;
}
}
如果在 vw （视口宽度）中定义字体大小，则可以使字体大小响应。但是，并非所有浏览器都支持它。解决方案是使用 JavaScript 根据浏览器宽度更改基本字体大小，并将所有字体大小设置为 %。
这是一篇描述如何制作响应式字体大小的文章：http ://wpsalt.com/responsive-font-size-in-wordpress-theme/
我找到了这个解决方案，它对我来说效果很好：
/* 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)));
}
您可以通过以下方式实现此目的：
这些单位将根据屏幕的宽度和高度自动调整大小。
很多答案，但我没有看到有人提到结合媒体查询的 min 或 max 函数
CSS中有一个max()函数，所以我们上面的例子变成了一个单行：
font-size: max(30vw, 30px);
或者用最小值和最大值加倍：
font-size: min(max(16px, 4vw), 22px);
这与以下内容相同：
font-size: clamp(16px, 4vw, 22px);
然后不要忘记将其包装在媒体查询中，并以您喜欢的方式应用于您的 h1、h2、h3、h4、h5、h6。
@media (max-width: 600px) {
h1 {
font-size: clamp(16px, 4vw, 22px);
}
}
经过许多结论后，我最终得出了这种组合：
@media only screen and (max-width: 730px) {
h2 {
font-size: 4.3vw;
}
}
我认为这可以完成以下工作：
3.3vw 表示视口宽度的 3.3%，
随着屏幕尺寸的变化，这将始终响应。
h1{
font-size: 3.3vw;
}
通过使用 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>设置您的基本字体大小并使用钳制功能对其进行钳制。
使用clamp() 设置字体大小，如在这些示例中，允许您设置一个随视口大小而增长的字体大小，但不会低于最小字体大小
[https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()][Clamp Method MDN Docs]
这是一个例子。
h1 {
font-size: clamp(1.5em, 4vw, 2.5em);
}
h2 {
font-size: clamp(1.2em, 4vw, 2.4em);
}
p {
font-size: clamp(0.6em, 4vw, 1.2em);
}
恐怕在字体大小调整方面没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会平滑地调整大小。例如，如果您使用：
@media only screen and (max-width: 320px){font-size: 3em;}
font-size对于 300 像素和 200 像素宽度，您将是 3em。但是你需要降低font-size200px 的宽度才能做出完美的响应。
那么，真正的解决方案是什么？只有一种方法。您必须创建一个包含文本的 PNG 图像（具有透明背景）。之后，您可以轻松地使图像具有响应性（例如：宽度：35%；高度：28px）。通过这种方式，您的文本将完全响应所有设备。
这是对我有用的东西。我只在 iPhone 上测试过。
无论您有h1,h2还是p标签，都将其放在您的文本周围：
<h1><font size="5">The Text you want to make responsive</font></h1>
这会在桌面上呈现 22pt 的文本，并且在 iPhone 上仍然可以阅读。
<font size="5"></font>