我用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示例页面上,标题在压缩和展开时适应浏览器。

我是不是忽略了一些很明显的东西?我该如何做到这一点?


当前回答

在调整浏览器窗口大小时,字体大小不会像这样响应。相反,它们会对浏览器的缩放/类型大小设置做出响应,比如在浏览器中同时按下键盘上的Ctrl和+。

媒体查询

你必须考虑使用媒体查询来减少字体大小在特定的时间间隔,它开始破坏你的设计和创建滚动条。

例如,试着在你的CSS底部添加这个,在你的设计开始中断的地方改变320像素的宽度:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

你也可以使用视口百分比长度,如vw, vh, vmin和vmax。官方W3C文档声明:

viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时,它们将相应地缩放。

同样,从同一W3C文档中,每个单独的单元可以定义如下:

vw单位-等于初始包含块宽度的1%。 vh单位-等于初始包含块高度的1%。 vmin单位-等于vw或vh中较小者。 vmax单位-等于vw或vh中较大的一个。

它们的使用方式与其他CSS值完全相同:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

从这里可以看出,兼容性相对较好。但是,某些版本的ie浏览器和Edge浏览器不支持vmax。此外,iOS 6和7的vh单位也有问题,这在iOS 8中得到了修复。

其他回答

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

这里clamp有三个参数。

第一个是允许的最小字体大小。 第三个是允许的最大字体大小。 第二个参数是您希望始终具有的font-size。它的单位必须是相对的(vw, vh, ch),而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。

举个例子: 假设有一个很大的fontawesome图标,您想动态调整它的大小(响应式图标)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

这里80vw是首选的字体大小。 15雷姆是最小字体大小(下界)。 80vh是最大字体大小(上限)。

i.e.

如果在特定的移动屏幕尺寸中,如果80vw < 15rem,则字体大小为15rem。 如果屏幕太宽,那么如果80vw > 80vh,那么字体大小是80vh。

人们提出的上述方法往往效果不确定。就像我们只使用vw时,字体大小有时可能太大或太小(无界)。

@media查询可以使用,但你必须使用至少3个媒体查询,使字体大小响应

文本大小可以用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;
    }
}

字体大小的变化取决于屏幕大小使用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 >

有很多答案,但我没有看到任何人提到与媒体查询相结合的最小或最大函数

在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);
         }
    }

试着在你的样式表中包含以下内容:

html {
  font-size: min(max(16px, 4vw), 22px);
}

更多信息请访问https://css-tricks.com/simplified-fluid-typography/