Javascript 如果窗口大小低于某个大小，是否显示不同的内容？

我早些时候问过这个问题，但没有说得那么清楚。基本上，我希望根据windows大小/屏幕分辨率更改HTML内容（包含外部javascript-请参见下文）。现在，问题已经更改，以更好地反映我需要做的事情。如果可能的话，我也希望通过一个外部javascript文件来完成

我有这个代码，显示所有垂直按钮共享我的内容，但我想显示水平按钮，如果用户使用较小的窗口大小。它将有一个不同的div，一些代码将被更改，即“data count=“horizontal”

通过我的外部JS文件也可以做到这一点，所以它不是内联的

但这并不重要

提前谢谢

此外，使用流体宽度CSS也不是一个选项，因为我有一个侧边栏，上面有无法改变大小的广告，html内容需要改变，而不仅仅是CSS

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

这是一个需要做但不起作用的例子

   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>
} }

函数shareStuff（）{
如果（$（窗口）.width（）<1024）{
}否则{
} }

请参阅：

请参阅：

是我一两周前注意到的一个项目。从静态布局扩展到大型显示器，并向下流动到最小的移动设备。似乎可以解决所有问题！

是我一两周前注意到的一个项目。从静态布局扩展到大型显示器，向下流动到smaL最新的移动设备。似乎可以解决您所有的问题！

我建议做两个不同的部分：

<div id="content1"></div>
<div id="content2"></div>

现在jQuery：

$('#content1').hide();
$('#content2').hide();

if(window.width() <= 600) {
    $('#content1').show();
} else {
    $('#content2').show();
}

$（'#content1'）.hide（）；
$（'#content2'）.hide（）；
如果（window.width（）我建议做两个不同的DIV：

<div id="content1"></div>
<div id="content2"></div>



现在jQuery：

$('#content1').hide();
$('#content2').hide();

if(window.width() <= 600) {
    $('#content1').show();
} else {
    $('#content2').show();
}

$（'#content1'）.hide（）；
$（'#content2'）.hide（）；
if（window.width（）用于切换样式表。如下所示：

var ADAPT_CONFIG = {
      path: 'http://yourpath.com/assets/',
      dynamic: true,
      range: [
        '0px    to 480px  = mobile.css',
        '481px  to 840px  = middle.css',
        '841px  to 1440px = large.css',
        '1441px           = xlarge.css'
      ]
    };

然后有多个包含内容的div：

<div id="1440">
BLAH BLAH </div>
<div id="840">
BLEH
</div>

在中间，把这个

#1440{display:none;}

只需使用不同的样式表来隐藏和显示内容，这里有一个演示：
用于切换样式表。如下所示：

var ADAPT_CONFIG = {
      path: 'http://yourpath.com/assets/',
      dynamic: true,
      range: [
        '0px    to 480px  = mobile.css',
        '481px  to 840px  = middle.css',
        '841px  to 1440px = large.css',
        '1441px           = xlarge.css'
      ]
    };

然后有多个包含内容的div：

<div id="1440">
BLAH BLAH </div>
<div id="840">
BLEH
</div>

在中间，把这个

#1440{display:none;}

只是使用不同的样式表来隐藏和显示内容这是一个演示：
这可能与你的问题有关，但是你的标记中有一个不匹配的结束跨度标签。至于你的问题，到目前为止你做了什么？你在哪里被卡住了？这个跨度被用来调用一个按钮来分享电子邮件……之前的问题被放弃了，因为我还不够清楚，所以我基本上回到了开始。不知道该怎么做。感谢这个问题可能与你的问题有关，但是你的标记中有一个不可比拟的结束跨度标签。至于你的问题，到目前为止你做了什么？你在哪里被卡住了？o点击一个按钮进行电子邮件共享…我之前的问题被放弃了，因为我不够清楚，所以我基本上回到了开始。不知道该怎么做。谢谢不，这是“分辨率更改内容”，不仅仅是样式表。谢谢。不，这是“分辨率更改内容”“不仅仅是样式表。谢谢。流体不是一个选项。我不想单独更改css。我也想更改HTML。如果您阅读，这都在我的问题中，标题上写着“如果更改内容”不改变css如果。流体不是一个选项。我不想单独改变css。我也想改变HTML。如果你阅读，这都在我的问题中，标题上写着“如果改变内容”，如果不改变css。