1

私は (Wordpress を使用して) Web サイトを作成しており、スライダーの横に 2 つのバーを挿入しました。問題は、ページが小さすぎると、2 つのバーがスライダーの上下に移動することです。ブラウザのページが 1220px 未満の場合、それらを非表示にしたいと思います。

これが私のスライダー (および 2 つのバー) のコードです。これは、私の Header.php ファイルにあります。

<div style="text-align: center; margin-bottom:20px;">

    <div id="bar" style="height:420px; width:6px; display:inline-block;">
        <img src="http://e404.ca/wp-content/uploads/SliderBar.png">
    </div>

    <div style="margin-left:auto; margin-right:auto; height:420px; width:1200px; display:inline-block;">
        <?php layerslider(1, 'homepage'); ?>
    </div>

    <div id="bar" style="height:420px; width:6px; display:inline-block;">
        <img src="http://e404.ca/wp-content/uploads/SliderBar.png">
    </div>

</div>

基本的に、ページが1220px未満の場合、IDが「bar」の2つが消えてほしいです。

jQueryなしで機能するソリューションが欲しいです。私のウェブサイトをご覧になりたい場合は、スライダーをご覧ください: http://e404.ca

あなたが助けてくれることを願っています...！

4

3 に答える 3

1

これでうまくいくはずです.cssを入れてください：

@media screen and (max-width: 1220px) {
    #bar{display:none;}
}

もう1つ、異なる要素に同じIDを使用しないでください。代わりにクラスを使用してください。

于 2013-08-22T03:56:31.260 に答える
0

これには Javascript は必要ありません。この記事には、必要なすべての情報が記載されているので、参照してください。基本的に、ブラウザのサイズに応じて異なる CSS を適用します。

<link rel='stylesheet' media='screen and (max-width: 1220px)' href='css/medium.css' />

たとえば、上記はブラウザーの幅が 1220 より小さい場合にのみ読み込まれます。この CSS では、次のように div を非表示にするルールを設定できます。

#bar {display:none; }

Web サイトが大きくなるにつれて、管理が非常に難しくなるため、1 つの CSS をすべてに使用することはお勧めしません。さまざまな解像度の複数の CSS ファイルを使用すると、将来の作業が楽になります。

お役に立てれば

于 2013-08-22T03:57:27.603 に答える