jquery - 根据页面宽度实时更改 CSS

Question

我正在尝试根据当前页面宽度向页面添加某些样式。我希望它能够实时运行。例如，在 iPhone 上查看并在查看已加载页面的同时旋转屏幕时，css 将发生变化。另外，理想情况下，我想使用移动 jquery 库。在此先感谢您的帮助。这是我到目前为止似乎不起作用的东西，我也尝试使用 LiveQuery，但也没有用

$(function() {
    $(document).live('css_init', function() {
           if (($(window).width()) > 430) {
                $('#main_panels .next').addClass("next-wide");
                $('#main_panels .prev').addClass("prev-wide");

           };
       });
       $(document).trigger('css_init');
});

Answer 1

立即停止，全选并按下键盘上的退格/删除键。

现在这种恐惧已经消退，让我向您介绍媒体查询。所有现代移动设备都完全支持这一点（即具有完整网络浏览器的设备，而不是 WAP 门户）。现代桌面浏览器也已广泛支持它。唯一的例外是 IE<9，为此，你有Respond.js。

现在，去享受网络标准的荣耀吧。

Answer 2

CSS 媒体查询应该在没有 javascript 的情况下做你想做的事。

尝试这样的事情：

<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/landscape.css' />

您可能想要添加一些硬分辨率约束，但这很容易做到。

http://css-tricks.com/css-media-queries/

Answer 3

你可以使用 jquery resize 事件监听器吗？

myFunction() {
    var w = $(window).width();
    if (w > 430){
        // do stuff
    };
}
$(window).resize(function(){
    myFunction();
}