2

私は出会い系サイトのランディングページをデザインしており、「最新のメンバー」を呼び出すコードがいくつかあります。これは次のとおりです-

CSS: 

#wld_badge_wrapper { 
    border: 1px solid black; 
    width: 420px; 
    overflow: hidden; 
} 
#wld_badge_inner { 
    padding: 10px 0 10px 10px; 
} 
.wld_badge_item { 
    float: left; 
    margin: 0 10px 0 0;
    padding: 0; 
} 
.wld_badge_item img { 
    border: 1px solid black; 
} 
.wld_badge_item_detail { 
    margin-top: 5px;
    font-size: 75%;
    width: 90px; 
    overflow: hidden; 
} 
.wld_badge_clear { 
    clear: both; 
}

HTML: 

<div id="wld_badge_wrapper">
    <div id="wld_badge_inner">
        <script type="text/javascript" src="http://s.wldcdn.net/api/badge/js/12415-6></script>
        <div class="wld_badge_clear" />
    </div>
</div>

上記のコードは 6 つのプロファイルを呼び出すため、src の末尾に -6 が付きます。これを「-2」に変更すると、2 つのプロファイルのみが呼び出されます。

問題は、ページがレスポンシブであるため、携帯電話のように画面サイズが小さい解像度の場合は -2 div を呼び出すか、解像度が大きい場合は -6 スクリプトを呼び出してより多くのプロファイルを表示できるかということです。画像？(そのため、ページにスクリプトの 2 つのバージョンがあり、関連するバージョンのみを表示し、正しくないバージョンを非表示にします)。

アイデアはありますか？

4

2 に答える 2

9

はい、これは で簡単に実行できます@media-queries。

メディア クエリの簡単な例は次のとおりです。

HTML ページの head で次のようにします。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

そして、コンテンツを含む div:

<div class="visible-phone">
content for phone // in your case -2
</div>

と

<div class="visible-desktop">
content for desktop // in your case -6
</div>

css は次のようになります。

.visible-phone{
@media (max-width: 480px) { more css }
}

.visible-desktop{
@media (min-width: 768px) { more css }
}

詳細はこちら&こちら

于 2013-06-20T12:35:39.430 に答える
4

これを試して：

  1. ウィンドウサイズを取得する

var windowsize = $(window).width();
変数番号;

  1. if-else またはスイッチで、必要な数の条件を定義してから、各条件のプロファイルの数を変数に割り当てます

if (windowsize > 1024) {
num = 6;
}elseif (windowsize > 768 && windowsize <= 1024) {
num=4
}

  1. 特定の数のプロファイルをロードするために変数を使用するようになりました

    • ウィンドウのサイズ変更の条件を再度確認してください。
于 2013-06-20T12:40:59.160 に答える