根據頁面寬度更改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 pbal

您是否考慮過媒體查詢？ – 2012-02-10 22:03:12

馬上停止，選擇所有和命中退格/鍵盤上的刪除鍵。

現在，恐怖已經消失，讓我向您介紹Media Queries。這在所有現代移動設備（即具有完整網頁瀏覽器，而不是WAP門戶的東西）上得到完全支持。它在現代桌面瀏覽器中也得到了廣泛的支持。唯一的例外是IE < 9，對此，您有Respond.js。

現在，去享受網頁標準的輝煌。

來源

2012-02-10 22:02:29

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

來源

2012-02-10 22:03:18

CSS Media Queries應該在沒有javascript的情況下做你想做的事。

嘗試這樣：

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

您可能需要添加一些硬的決議約束上但那是很容易做到。

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

來源

2012-02-10 22:05:20 Hersha

根據頁面寬度更改CSS live

回答

相關問題