如果屏幕分辨率小於？則更改div內容？

Question

我有一些浮動元素到我的網站，如果屏幕res是1024X768及以下將無法看到。 所以我想給那些屏幕上的人們提供不同的內容放置，內容的代碼也會略有不同。

假設1024以上的人將在頁面的左側浮動一個大的正方形，下面的人將獲得一個位於主要內容上方的矩形。

有一些javascript項目可以做到這一點我猜，但我還沒有找到任何...

這是我希望改變主要內容的內容也將改變。

這是一個像需要做的事情的例子。

function shareStuff（）{

if ($(window).width() < 1024) {
   <div id="sharepost"><div class="sharer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="code_love" data-related="love:code">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sharer"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script></span>
</div><div class="sharer"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script></div><div class="sharer"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></div><span class="st_email" ></span>
</div>

} else {
  <div id="sharepost"><div class="sharer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="code_love" data-related="love:code">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sharer"><a name="fb_share" type="horizontalk" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script></span>
</div><div class="sharer"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script></div><div class="sharer"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></div><span class="st_email" ></span>
</div>
} }

提前致謝

Answer 1

如果沒有必要，請不要使用javascript，媒體查詢可以提供幫助

<!-- here provide css for all (also > 1024px) cases -->
<link rel='stylesheet' type='text/css' href='allresolution.css' />

<!-- here overwrite css for small devices -->
<link rel='stylesheet' type='text/css' media="all and (max-width:1024px)" href='lessthan1024.css' />

Answer 2

您無法檢測屏幕分辨率，但可以檢測瀏覽器大小：

if ($(window).width() < 1024) {
    // code for small viewports
} else {
    // code for large viewports
}

這應該足以滿足您的需求。

Answer 3

剛遇到同樣的問題。 我混合了上面的一些答案。

<div class="someclass" id="hidden_1" style="display:none"> Something very big for big screen</div> 
<div class="someclass" id="hidden_2" style="display:none"> small</div> 


 @media only screen and (min-width: 1450px)
{
#hidden_1 {display: block !important}
}
@media only screen and (min-width:1281) and (max-width:1450)
{
#hidden_1 {display: block !important}
}

@media only screen and (min-width:981px) and (max-width:1024px)
{
#hidden_2 {display: block !important}
}

您只需要確保填寫所有可能的屏幕！ 否則就沒有文字了。 我的問題是1024px屏幕....

我試圖讓一個div正常，然后用CSS隱藏它！重要，它在chrome上不起作用。 我是新來的電腦......

最后，我必須為（min1450px）創建一個媒體查詢。 如果我放置了應該由特定媒體查詢覆蓋的一般代碼部分，則這個一般部分（沒有媒體查詢）覆蓋了更具體的部分。 因此，我在媒體查詢中添加了隱藏的div，該查詢將針對所有具有最小查詢@media屏幕並且（最小寬度：1450px）的計算機。 比OS /瀏覽器開始應用正確的媒體查詢。

Answer 4

您需要為每種情況加載不同的css樣式表，您可以通過在加載時調整screen.width和調整大小來執行此操作。

像這樣的東西。

  if(screen.width==1024)
     {
        document.write("<link rel='stylesheet' type='text/css' href='style_1024.css' />"); // this css runs in only 1024 resulation
     }
  else
    {
        document.write("<link rel='stylesheet' type='text/css' href='style_other.css' />"); // for other resulatiom
    }

如果窗口從一個窗口更改為另一個窗口，則需要刪除其他樣式表。