根据页面宽度更改CSS live

问题描述：

我想基于当前页面宽度向页面添加某些样式。我希望这能够运作。例如，当在iPhone上查看并在查看已经加载的页面时旋转屏幕时，css将会改变。此外，我最好喜欢使用移动jquery库。先谢谢您的帮助。以下是我迄今为止这似乎并没有工作，我尝试使用的liveQuery也并没有工作，要么根据页面宽度更改CSS live

$(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'); 
});

您是否考虑过媒体查询？ – 2012-02-10 22:03:12

答

马上停止，选择所有和命中退格/键盘上的删除键。

现在，恐怖已经消失，让我向您介绍Media Queries。这在所有现代移动设备（即具有完整网页浏览器，而不是WAP门户的东西）上得到完全支持。它在现代桌面浏览器中也得到了广泛的支持。唯一的例外是IE < 9，对此，您有Respond.js。

现在，去享受网页标准的辉煌。

+1，你解释的方式:) – ShankarSangoli 2012-02-10 22:30:38

在我的电脑上的Safari浏览器中工作，但不适用于我的移动设备。这需要实时更新CSS，而不仅仅是在加载时。 – pbal 2012-02-10 22:40:02

媒体查询实时更新。如果他们不是，那么您正在使用的查询存在一些问题，或者您的特定移动设备/移动浏览器存在一些错误。请注意，有些设备报告的宽度和设备宽度与其他设备不同。此外，设备宽度在一些设备上与方向无关，即设备宽度是设备宽度是设备宽度，尽管您持有该设备宽度。可能需要进行一些测试和调整才能使您的查询完全按照您的预期工作，但欢迎使用Web。 – 2013-02-14 16:10:51

答

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

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

答

CSS Media Queries应该在没有javascript的情况下做你想做的事。

尝试这样：

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

您可能需要添加一些硬的决议约束上但那是很容易做到。

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

根据页面宽度更改CSS live

相关推荐