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

时间:2013-01-14 00:01:59

标签: css css3

是否可以使用font-size在浏览器调整大小上设置css 动态更改

我有使用媒体查询设置的断点。在第一个断点处,字体大小为,1em。在另一个断点处,文本放大为2em

字体调整大小仅发生在断点上。当你将一个投币器宽度设置为百分比时,我正在努力获得你所获得的效果(当你调整浏览器大小时它会自动调整大小。)

有没有办法让文字从一个断点扩展到另一个断点动态没有使用javascript?

2 个答案:

答案 0 :(得分:0)

如果要根据窗口大小更改onresize的字体大小,则需要将javascript处理程序绑定到window resize事件。如果您只想在两种状态之间制作动画,可以使用CSS3动画,f.ex:

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

http://jsbin.com/uyitut/1

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

答案 1 :(得分:0)

可以实现,请参阅演示CSS transitions & media queries和文章Adding the transitions