1

私のブログでは、JavaScript プラグインの Unslider を使用していくつかの画像を表示しています。スライドの高さを変更するメディア クエリを追加しました。最初は、スライドの幅はビューポート幅の 75% です。

.banner ul li {
    height: 75vw;
    width: 100vw;
}

次に、ブラウザが 720px を超える場合、またはランドスケープ モードの場合、高さをビューポートの高さの 90% に変更します

@media screen and (min-width: 720px),
screen and (orientation: landscape){
   .banner ul li {
       height: 90vh;
   } 
}

ただし、変更を適切に適用するには、ページを更新するか、スライドを変更する必要があることが、私の Web サイトでわかります。

ここで私が話していることを見ることができます: http://78.23.161.50/posts/1

Ps。unsliderオプションfluidはに設定されていますtrue

私は何か間違ったことをしていますか？それとも、Unslider プラグインは、私が望んでいたほど流動的ではありませんか? ウェブサイトの構造を備えた codepen も作成しましたが、ペンでメディア クエリとランドスケープ モードを試すのは簡単ではありません。とにかく、ここにあります：http://codepen.io/anon/pen/epmPmd

4

0 に答える 0