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

我之前问过这个问题，但并不像我应该那么清楚。基本上我希望改变HTML内容（包含外部JavaScript - 见下文），取决于窗口大小/屏幕资源。现在的问题已经改变，以更好地反映我需要做的事情。另外，我希望这可以通过外部JavaScript文件完成，如果possilbe。如果窗口大小低于特定大小，则显示不同的内容？

我有这个代码显示所有垂直按钮用于共享我的内容但是我想显示水平按钮，如果用户使用较小的窗口大小。这将有一个不同的股利和一些代码西港岛线改变，即“数据数=”横向”。

这将是真棒通过我的外部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> 
} }

来源

2010-11-10 Mark

这可能与您的问题相关，也可能不相关，但您的标记中间有一个无与伦比的结束范围标记。至于你的问题，到目前为止你做了什么？你卡在哪里？ – Ender 2010-11-10 17:48:46

该跨度用于调用电子邮件共享的按钮...我之前的问题被抛弃了，因为我不够清楚，所以我基本上回到了开头。不知道该怎么做。谢谢 – Mark 2010-11-10 18:01:55

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

来源

2010-11-10 17:48:31

不，它的“分辨率改变内容”不只是样式表。不过谢谢。 – Mark 2010-11-10 18:02:20

CSSgrid是一个项目，我注意到一两个星期前。从大型监视器的静态布局缩放，并变得流动到最小的移动设备。似乎解决你所有的问题！

来源

2010-11-10 18:05:39 Chris

流体不是一种选择。我不想单独改变CSS。我也想改变HTML。如果你阅读并且标题中提到“如果改变内容”并不改变css，那么这些都是在我的问题中。 – Mark 2010-11-10 18:11:10

我建议做2个不同的DIV：

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

现在的jQuery：

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

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

来源

2010-11-10 18:58:41

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

来源

2012-08-07 14:11:37 jackson5

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

回答

相关问题