根据页面宽度实时更改 CSS答案

【问题标题】：Change CSS live based on page width根据页面宽度实时更改 CSS
【发布时间】：2012-03-03 08:52:24
【问题描述】：

我正在尝试根据当前页面宽度向页面添加某些样式。我希望它能够实时运行。例如，在 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');
});

【问题讨论】：

你考虑过媒体查询吗？

标签： jquery livequery dynamic-css

【解决方案1】：

现在停下来，全选，然后按键盘上的退格/删除键。

现在恐惧已经消退，让我向您介绍Media Queries。所有现代移动设备都完全支持这一点（即具有完整网络浏览器的设备，而不是 WAP 门户）。现代桌面浏览器也已广泛支持它。唯一的例外是 IERespond.js。

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

【讨论】：

在我的 PC 上的 Safari 中工作，但不能在我的移动设备上工作。这需要实时更新 CSS，而不仅仅是在加载时。
媒体查询会实时更新。如果不是，那么您正在使用的查询存在一些问题，或者您的特定移动设备/移动浏览器存在一些错误。另请注意，某些设备报告的宽度和设备宽度与其他设备不同。此外，设备宽度在某些设备上与方向无关，即设备宽度是设备宽度，设备宽度是设备宽度，无论您以哪种方式握住它。可能需要进行一些测试和调整才能让您的查询完全按照您的预期工作，但欢迎来到网络。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

试试这样的：

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

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

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

【讨论】：