大規模なデスクトップのメディアクエリとは何ですか？

Question

通常のデスクトップ画面にメディアクエリを使用していますが、大きな画面にはidtを適用できません。ただし、以下のメディアクエリは大きなデスクトップ画面にも適用されます。メディアクエリを修正してください。

@media (min-width: 992px) and (max-width : 1200px){//This should work for Normal desktops(15 to 18 inch) only.
}

Answer 1

大規模ディスプレイ向けの最適化の課題は、コンテンツのスケーリングと管理方法に集中しています。特定のポイントで画面幅を想定する必要があります。

例：クラス「コンテナ」の場合

@media screen and (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    width: 1870px;
  }
}

Answer 2

これらのいずれかを試すこともできます

@media only screen  and (min-width : 1224px) {
/* Styles */
}


@media only screen  and (min-width : 1824px) {
/* Styles */
}

Answer 3

cSSでより大きな画面をターゲットにしたい場合は、大きな解像度の幅基準を定義する必要があります。 4kスクリーンをターゲットにしたいなら

    @media (min-width: 2000px) {
    }

メディアクエリでは、画面サイズは画面サイズと見なされます。cssを使用して画面サイズをターゲットに設定する場合は、画面解像度の範囲をターゲットにする必要があります。

Answer 4

異なるスタイルでスタイリングするために必要な画面サイズを確認してください。必要に応じてメディアクエリを使用します。 ;）

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

@media screen and (min-width: 1600px) {}

@media screen and (min-width: 1900px) {}