如果屏幕分辨率小于？则更改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
}

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