（CSS）在窗口大小调整时更改元素样式

Question

我最近偶然发现奥巴马竞选中的这个微型网站：

http://www.barackobama.com/anniversary

该网站的许多很酷的功能之一是它的动态标题 - 当您将浏览器窗口调整得更小时，顶部的“ OBAMA * BIDEN ”徽标会自动浮动到标题的左侧它的宽度变为36px（从而“隐藏”了“OBAMA BIDEN”文本）。

此页面的开发人员是如何实现此效果的？这是javascript / jquery驱动，还是纯粹的CSS技巧？

想法？

Answer 1

This question涵盖了window.resize事件。您可以在其处理程序中执行任何操作。

另一种选择是使用media queries，允许您在浏览器窗口维度更改后更改应用的CSS（这是您引用的网站所做的。它将样式类更改与动画相结合（使用Chrome开发人员工具）在大小浏览器尺寸中查看哪些样式应用于徽标））。