Question

我正在尝试一个小时，我无法在某些列（引导程序）中创建字体大小。这是fiddle，显示了正在发生的事情。

有什么方法可以让我做出响应？

这是我用来使其响应的CSS：

@media only screen and (max-width: 450px) {
    .digit {
        font-size: 1em;
    }
}

但它没有用。：/

Answer 1

我为此制作了一个插件：https://github.com/kagagnon/Responsive-Font

包含它后，您必须在JavaScript中设置查询点：

{
    queryPoint : font-size
}

例如：

rf('.digit').setQueryPoint({ //rf() = CSS selector.
    450 : 12,
    1500 : 40
})

http://jsfiddle.net/Pm2nh/5/

当然，您需要根据需要调整价值。

Answer 2

如果您只担心现代浏览器（大多数移动浏览器都属于此类浏览器），您可以使用视口宽度（vw）测量。它是视口（设备）宽度的百分比。视口宽度为3％的示例。调整窗口大小并再次点击“运行”。

http://jsfiddle.net/KA5qQ/

有关详细信息，请查看我们的Chris Coyier's blog post。

<div id="myDiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS

#myDiv {
    font-size: 3vw;
}

无法使字体大小响应

2 个答案: