如果窗口大小低於特定大小，則顯示不同的內容？

我之前問過這個問題，但並不像我應該那麼清楚。基本上我希望改變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

如果窗口大小低於特定大小，則顯示不同的內容？

回答

相關問題