Question

我之前提过这个问题，但并不像我应该那样清楚。基本上我希望根据窗口大小/屏幕分辨率更改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>
} }

Answer 1

我建议做两个不同的DIV：

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

现在jQuery：

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

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

Answer 2

请参阅：http://css-tricks.com/resolution-specific-stylesheets/

Answer 3

CSSgrid是我在一两周前发现的一个项目。从静态布局扩展到大型监视器，并变得流畅到最小的移动设备。似乎解决了所有问题！

Answer 4

使用Adapt.js切换样式表。像这样：

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>

然后在large.css中把这个：

#840{display:none;}

并在middle.css中放了这个

#1440{display:none;}

基本上只是使用不同的样式表隐藏和显示内容这里是一个演示：http://adapt.960.gs/test_id.html

如果窗口大小低于特定大小，则显示不同的内容？

4 个答案: