如果屏幕分辨率小于，更改 div 内容？

Question

我的网站有一些浮动元素，如果屏幕分辨率为 1024X768 及以下，这些元素将无法显示。因此，我想为使用该屏幕的人们提供该内容的不同位置，并且内容的代码也会略有不同。

假设 1024 及以上的人会在页面左侧得到一个大正方形，而下面的人会得到一个位于主要内容上方的矩形。

我猜可能有一些 javascript 项目可以做到这一点，但我还没有找到任何...

这是我要更改的内容主div id也会更改。

这是一个不需要做的事情的例子。

函数 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

刚刚遇到同样的问题。我混合了上面的一些答案。

<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 !important 隐藏它，但它在 chrome 上不起作用。我是计算机新手...

最后，我必须为 (min1450px) 创建一个媒体查询。如果我放置了应该被特定媒体查询覆盖的一般代码部分，那么这个一般部分（没有媒体查询）将覆盖更具体的部分。所以我在媒体查询中添加了隐藏的 div，该查询将针对所有具有最小查询@media only screen 和（最小宽度：1450px）的计算机。比操作系统/浏览器开始应用正确的媒体查询。

Answer 2

如果没有必要，请不要使用 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 3

您需要为每种情况加载不同的 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
    }

如果窗口从一个更改为另一个，您将需要删除另一个样式表。

Answer 4

无法检测屏幕分辨率，但可以检测浏览器大小：

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

这应该足以满足您的需求。