我用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 : 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个媒体查询,使字体大小响应

其他回答

字体大小的变化取决于屏幕大小使用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媒体说明符(这是他们[zurb]使用的)来进行响应式样式:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

你可以使用viewport值代替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:视口大小的排版

我找到了这个解决方案,对我来说非常有效:

/* 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)));
}

我们可以使用css中的calc()

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))

Codepen