画面サイズに基づいてレイアウトを変更してください

Question

私のウェブサイトのヘッダーのコンテンツは、通常のサイズのデスクトップ/ラップトップでは画面幅の100％を占めていますが、より大きなディスプレイの中央に配置したいと考えています。 「より大きなディスプレイ」とは、解像度だけでなくディスプレイの実際のサイズも指しています。 15インチのラップトップと23インチのデスクトップ（どちらも同じ解像度1920x1080）で、私はディスプレイが違うようにしたいと思います。

私は現在、ヘッダーの内容に.container BootStrapクラスを使用しています。そのため、このような広いメニューを23インチディスプレイに表示すると、コンテナは、画面の幅が1200pxを超える100％の幅を有する繰り返しますが、これは私が欲しいものは本当にないです。スクリーンの幅が1200pxを超える

• 場合は、ヘッダの幅が100％であるべきである
• の場合画面の幅が1920ピクセルを超え、ヘッダーの幅がデフォルトのものになり、ヘッダーが中央に配置されます。
• I f画面の幅が1200ピクセルを超え、画面自体が大きい場合（19インチ以上の場合）、ヘッダーの幅はデフォルト値にし、ヘッダーは中央に配置する必要があります。

私はそれが最良のアプローチであるかどうかはわかりませんが、私はすべての提案に開放しています。

ありがとうございました

Answer 1

私のソリューションは、これは

@media screen and (max-resolution: 116dpi){ 

116dpiのようなものを書くことが許さmedia queries based on pixel density

を使用していた1920×1080の解像度を持つ19" 画面のDPIです。画面場合同じ解像度で23 "と大きくなると、ピクセル密度は低くなり、次に116dpiを下回ります。

Answer 2

最小幅でメディアの画面と制限を設定してみてください。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (min-width: 1200px) { 
     .container { 
      width: 100%; 
     } 
    } 

@media screen and (min-width: 1920px) { 
     .container { 
      width: 500px; 
     } 
    }