我用Zurb Foundation 3网格创建了一个网站。每个页面都有一个大的h1:
身体{ 字体大小:100% ｝ /*报头*/ h1 { 字体大小:6.2 em; 粗细:500; ｝ < div class = "行" > <div class="十二列text-center"> <h1> LARGE HEADER TAGLINE </h1> < / div > <！——结尾口号——> < / div > <！——结束行——>
当我将浏览器调整为移动尺寸时，大字体不会调整，并导致浏览器包含水平滚动以适应大文本。
我注意到，在Zurb Foundation 3 Typography示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
这部分在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;
对于medium up，它们根据第一组变量生成大小:
@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; }
}
对于default-i。在小屏幕上，他们使用第二组变量来生成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文件中重写，为各自的屏幕大小设置字体大小。
其他回答
响应式字体大小也可以用这个称为FlowType的JavaScript代码完成:
http://simplefocus.com/flowtype/ https://github.com/simplefocus/FlowType.JS
FlowType -响应式网页排版在其最好的:字体大小基于元素宽度。
或者这个叫做FitText的JavaScript代码:
http://fittextjs.com/ https://github.com/davatron5000/FitText.js
FitText -使字体大小灵活。在响应式设计中使用这个插件，根据比例调整标题的大小。
我们可以使用css中的calc()
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))
Codepen
如果在vw(视口宽度)中定义字体大小，则可以使字体大小具有响应性。然而，并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小，并以%为单位设置所有字体大小。
下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/
我使用这些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);
}
你可以通过以下方法来实现这一点:
用rem表示例如2.3 rem 用em表示例如2.3em 用%表示2.3% 此外，你可以使用: Vh vw vmax vmin。
这些单元将根据屏幕的宽度和高度自动调整大小。
