css - レスポンシブ CSS - 2 セットのサイズ?

Question

jQueryやcssなどでこれを行う方法について、誰かが光を当ててくれることを願っています..

幅が 900 ピクセルの Web サイトがあります。しかし、ユーザーが幅 1140 ピクセル以上のウィンドウを拡大した場合、ウェブサイトに幅 1440 ピクセルを設定したいと思います。その理由は、jQuery クイックサンド プラグインを使用していて、すべてを完全に適合させたいからです。

Answer 1

メディア クエリは確かに最適な方法です。リンクやコード サンプルがない場合は、css で次のようなものから始める必要があります。

#someSelector {width:900px;}//all the css here for less than 1140px

@media all and (min-width:1139px) {//css here for 1140 and up
    #someSelector {width:1140px;}
}

Answer 2

私はメディアクエリを使用します、あなたはここで情報を見つけることができます。彼らはかなりラッドです。

Answer 3

jQueryとCSSでこれを実行したいだけの場合は、次のことを試すことができます（これは非常に単純で、最善の方法ではありませんが、要求に応えます）

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() >= '1440'){
      $("#wrapper").css('width','1440px');
    } else {
      $("#wrapper").css('width','900px');
    }
  });
});

または、これを試して、cssをネストすることでレイアウトの他の側面を簡単に変更することもできます。

CSS

#wrapper_small { width: 900px; }
#wrapper_large { width: 1440px; }

jQuery

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() >= '1440'){
      $("#wrapper_small").attr('id','wrapper_large');
    } else {
      $("#wrapper_large").attr('id','wrapper_small');
    }
  });
});

Answer 4

css に次のようなものを入れて、メディア クエリを作成します。

@media screen and (min-width:1400px;) 

{
   #div {
   max-width:1440px;
   width:100%;
   }
}