css - 在浏览器调整大小时增加字体大小

Question

有没有办法在浏览器调整大小时设置font-size 动态更改css？

我用媒体查询设置了断点。在第一个断点处，字体大小为1em. 在另一个断点上，文本放大到2em.

字体大小调整仅发生在断点上。我正在寻找将硬币容器宽度设置为百分比时所达到的效果（当您调整浏览器大小时，它会自动调整大小。）

有没有办法让文本从一个断点动态放大到另一个断点而不使用 javascript？

Answer 1

可以实现，参见演示CSS 过渡 & 媒体查询和文章添加过渡

Answer 2

如果要根据窗口大小更改字体大小 onresize，则需要将 javascript 处理程序绑定到窗口大小调整事件。如果你只想在两个状态之间做动画，你可以使用 CSS3 动画，f.ex：

-webkit-transition:font-size 1s ease-out;

http://jsbin.com/uyitut/1

此示例使用触发器按钮来演示转换，但您可以添加多个媒体查询。这是每 100px 一个 mq 的一个相当尴尬的例子：http: //jsbin.com/uyitut/5但它有点工作。