0

モバイルファーストのアプローチでサイトを構築しており、3 つの異なるデザインがあります。

  • モバイル: 幅 767px まで (赤)

  • タブレット: 768px から 979px まで (青)

  • デスクトップ：980px～（緑）

.

縦向きと横向きの両方の iPad は、タブレット デザインとして動作する必要があります。（青い）

そして、私はこのメディアクエリを持っています:

body{
  background-color: red;
}

@media (min-width: 768px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

   body {
     background-color: blue;
   }
}

@media (min-width: 980px) {
   body {
     background-color: green;
   }
}

問題は、iPad がデスクトップ デザイン (緑) になることです。これは、メディア クエリの順序が影響し、後でコード化されるため、青、次に緑を取得するためです。

タブレットの最大幅を追加し、メディアクエリを並べ替えて、デスクトップが最初に表示され、次にタブレットが表示されるという解決策を見つけました。

body{
  background-color: red;
}

@media (min-width: 980px) {
   body {
     background-color: green;
   }
}


@media (min-width: 768px) and (max-width: 979px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

   body {
     background-color: blue;
   }
}

でも、できればモバイル、タブレット、デスクトップの順番を守っていきたいです。主に私はSassを使っていて、入れ子にすると注文しやすくなるので、

なにか提案を？

4

0 に答える 0