根据页面宽度javascript更改CSS?

时间:2012-01-25 18:22:15

标签: javascript jquery css

我们正在开发一个部署到移动设备,iPad,iPhone,Android的网络应用。我不是试图过滤掉用户代理以显示不同的视图,而是根据屏幕的宽度(这是唯一重要的,真的)来改变我的CSS。

我们已经把一些东西与jQuery放在一起了,我已经改变了一部分的CSS,这样当宽度缩小时,它不会占用太多的垂直空间(如下所示)

Old Page Fixed Page

我将如何在这样的按钮上实现类似的东西:

buttons look buttons broken

理想情况下,我应该能够更改CSS或类似的东西,这样如果宽度足够窄,甚至可以敲掉一个按钮,那么按钮就会连续堆叠起来。之后,我可以努力使按钮看起来正确。

1 个答案:

答案 0 :(得分:6)

根据页面宽度更改CSS的最简单方法是使用Media Queries,不需要JavaScript。

以下是来自被认为是概念创始人的响应式网页设计的精彩介绍: http://www.alistapart.com/articles/responsive-web-design/

如果您想根据页面宽度实际更改页面内容,则需要RESS之类的内容。 Here's一个简单的脚本,但它需要cookie并且不会在屏幕调整大小上调整,所以除非你绝对需要它,否则媒体查询要好得多。