0

TNWがやったことのようなものを喜んで作ります。画面が 900px 未満の場合、サイド カラム ナビゲーションが非表示になり、下にスライドするオプションが表示されます。彼らがメディアクエリを使用していることは知っていますが、css は非常に大きく複雑に見えます。また、メディアクエリのみを使用してすべてを実行しているのか、ブラウザのサイズ変更オプションも使用されているのかわかりません。

ミニマリストで、このオプションを簡単に達成できるものは何ですか。私の唯一の仕事は、800px未満の画面にこのオプションを表示することです

4

2 に答える 2

1

あなたの最良の選択肢はcssです。それは非常に簡単です：

CSS:

sidebar{
  //your css
}

@media only screen and (max-width:800px){
   sidebar{
       your css for 800width
   }
}

また、meta タグを追加することを忘れないでください。

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

jquery を使用する場合: これは好ましくありませんが、css を使用したくない場合は、次のようにします。

$(document).ready(function() {
    responsive();
    $(window).resize(function() { responsive(); });
});

function responsive(){
   var winWidth = $(window).width();
   if(winWidth < 800) { 
       // do stuff here
    }  
    else{
    }
}
于 2013-06-25T15:58:05.777 に答える