我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
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中有一个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);
}
}
响应式字体大小还有另一种方法——使用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和ie8中工作，你必须添加一个以px为单位的回退:
h1 {
font-size: 18px;
font-size: 1.125rem;
}
如果您正在使用Less进行开发，您可以创建一个mixin，它将为您进行数学计算。
Rem单元支持- http://caniuse.com/#feat=rem
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; }
设置你的基本字体大小和夹钳功能。
使用clamp()来设置字体大小，就像在这些例子中一样，允许您设置一个随视口大小而增长的字体大小，但不会低于最小字体大小
夹钳方法MDN文档
这里有一个例子。
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);
}
有几种方法可以实现这一点。
使用媒体查询，但它要求几个断点的字体大小:
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
使用%或em的尺寸。只要改变基本字体大小，一切都会改变。与前一个不同的是，你可以只改变主体字体，而不是每次都是h1，或者让基本字体大小是设备的默认值，其余都在em中:
“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc.. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
看到kyleschaeffer.com/..。
CSS 3支持相对于视图端口的新维度。但这在Android上行不通:
3.2vw =视口宽度的3.2% 3.2vh =视口高度的3.2% 3.2vmin =小于3.2vw或3.2vh 3.2vmax =大于3.2vw或3.2vh 身体 ｛ 字体大小:3.2大众; ｝
参见CSS-Tricks…再看看Can I Use…
