Question

是否可以根据浏览器窗口的宽度设置文本大小？例如，当窗口宽度为1000时，文本为40。当窗口宽度为500时，字体大小为20。

Answer 1

如果您定位相当新的浏览器（＆gt; = IE10）并希望文本不断调整其大小，您可以尝试新的CSS3 vw单位，该单位是基于宽度的长度单位视。但是，webkit在设置之后当前不会更新长度，但是这可以通过例如绑定重置事件来解决宽度。更正：至少Chrome 35.0.1916.114似乎不再出现此问题，但Safari 7.0.4仍然可以。 quirksmode文章显然有点过时了。

JSFiddle (with javascript fix for Webkit)

List of supported browsers as well as some other nifty units

Better list of supported browsers (thanks Ian)

Answer 2

是的，您可以使用@media queries执行此操作。对于您命名的示例，您需要以下

@media (min-width: 500px) {
    body {
        font-size:20px;
    }
}
@media (min-width: 1000px) {
    body {
        font-size:40px;
    }
}

如果浏览器宽度为500-1000像素，则会font-size定义为20px;如果浏览器宽度超过1000像素，则为40px。

请注意，如果要为默认字体大小添加样式，则需要在 @media查询之前定义该样式，否则查询中定义的样式将不会不要覆盖默认样式。

Answer 3

您可以像其他人指出的那样使用媒体查询，也可以使用this Javascript插件。

我将在下面列出媒体查询解释，因为：

@media (min-width: 1000px) {
    body {
        font-size:40px;
    }
}

当窗口大于1000px时，此代码将更改字体大小。

这是JSFiddle

这个问题也与我见过的许多其他人一样......

Answer 4

/* Base size (for mobile) */
body {
    font-size: 10px
}
/* All devices when window is bigger than 500 */
@media all and (min-width: 500px) {
    body {
        font-size: 20px;
    }
}
/* All devices when window is bigger than 1000 */
@media all and (min-width: 1000px) {
    body {
        font-size: 40px;
    }
}

Answer 5

有几个jQuery库可以实现这一目标。

通过这些文字的宽度通常会在window.resize()

上更新

文本大小取决于CSS中的窗口宽度

5 个答案: