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

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


当前回答

响应式字体大小也可以用这个称为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 -使字体大小灵活。在响应式设计中使用这个插件,根据比例调整标题的大小。

其他回答

有几种方法可以实现这一点。

使用媒体查询,但它要求几个断点的字体大小:

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…

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

用这个等式:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

对于大于或小于1440和768的任何值,您可以给它一个静态值,或者应用相同的方法。

vw解决方案的缺点是你不能设置缩放比例,比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小,这是你的想法字体大小,但当你将窗口宽度缩小到768时,它可能最终是12px,而不是你想要的最小尺寸。

使用这种方法,您可以设置上边界和下边界,字体将在两者之间自行缩放。

响应式字体大小还有另一种方法——使用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

“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:

font-size: calc(16px + 0.4vw);