我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
字体大小的变化取决于屏幕大小使用CSS，你可以看到这个H1标签是有响应的。(如果我说错了请指正)
@media only screen和(max-width: 1000px) { h1 { 字体大小:5 em; ｝ ｝ @media only screen和(max-width: 500px) { h1 { 字体大小:3他们; ｝ ｝ @media only screen和(max-width: 300px) { h1 { 字体大小:2 em; ｝ ｝ @media only screen和(max-width: 100px) { h1 { 字体大小:1 em; ｝ ｝ 调整浏览器大小!< / h1 >
其他回答
如果你正在使用一个构建工具，那么试试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);
}
使用CSS媒体说明符(这是他们[zurb]使用的)来进行响应式样式:
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
文本大小可以用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/
你可以通过以下方法来实现这一点:
用rem表示例如2.3 rem 用em表示例如2.3em 用%表示2.3% 此外，你可以使用: Vh vw vmax vmin。
这些单元将根据屏幕的宽度和高度自动调整大小。
