css - jquery モバイル CSS

Question

jquery モバイル CSS をデスクトップの「使いやすい」CSS に交換できるようにしたいと考えています。たとえば、ユーザーがモバイルデバイスを使用していない場合、非モバイルタイプのスタイルでスタイルを表示します。これを行うプラットフォームまたは既存の CSS はありますか?

score 2 · Accepted Answer

モバイル版の CSS をデスクトップで見栄えがするように変更するだけです。

CSS3 メディアクエリ

いくつかの例：

最大幅- 表示領域が 600px より小さい場合。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

最小幅- 表示領域が 900px を超える場合、次の CSS が適用されます。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

複数のメディアクエリ- 複数のメディアクエリを結合します。表示領域が 600px から 900px の場合、次のコードが適用されます。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

デバイスの幅 max-device-width が 480px の場合 (例: iPhone ディスプレイ)、コードが適用されます。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

別のスタイルシートへのリンク:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

1 に答える 1