0

CSS メディアクエリについて質問があります。私の質問は、css メディア クエリの順序によって違いが生じるかどうかです。

例えば：

<link rel="stylesheet" href="desktop.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="mobile.css" media="">



<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="desktop.css" media="">

いくつかのメディア クエリを使用して、デスクトップ、ラップトップ、およびモバイル デバイスをターゲットにするとします。これにより、複数のデバイスでのデザインの表示方法が変わりますか? リンクの順序は重要ですか?

4

4 に答える 4

2

いいえ。通常、デスクトップやハンドヘルドなどのメディアタイプの使用のみに依存することは避けてください。モバイルデバイスはこのクエリを偽造することが知られているため、より優れたスタイルシートを取得できます。画面解像度、ピクセル密度などを指定する、より堅牢なメディアクエリを使用します。スタイルシートでは、次のようにします。

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background: #ccc;
  }
}

クエリが重複している場合、通常のカスケードの対象となり、上書きされる可能性があります。

仕様： http ：//www.w3.org/TR/css3-mediaqueries/

チュートリアル： http ：//webdesignerwall.com/tutorials/sensitive-design-with-css3-media-queries

于 2012-12-10T20:59:26.553 に答える
2

要するに、そうです。かなり大量に。

しかし、それらが影響を与える可能性があります。

ご存知Cascading Style Sheetsのように、名前が示すように、さまざまなスタイルをカスケードします。

たとえば、スタイルがある場合、desktop.cssそれらはページ内のすべての要素に展開されます。次に、スタイルのlaptop.css対象となる別のスタイルが優先されます。からのスタイルにも適用されます。desktop.csslaptop.cssmobile.css

例：

//Desktop.css
body {
      background: pink;
 }

//laptop.css
body {
      background: yellow;
 }

//mobile.css
body {
      background: green;
 }

メディアのクワイアがない場合、背景は緑色になります。

これを行う場合：

//laptop.css
body {
      background: yellow;
 }

//mobile.css
body {
      background: green;
 }

//Desktop.css
body {
      background: pink;
 }

背景はピンクになります。

ドキュメント内でカスケードする順序でアイテムを配置します。モバイルをサイトのデフォルト バージョンにする場合を除き、モバイルをデスクトップの前に配置しないでください。

于 2012-12-10T20:56:18.423 に答える
0

モバイルとラップトップのメディアクエリを最初に配置する必要があります。たとえば、min-width：... pxを使用すると、cssは大きな画面では上書きされ、画面にmin-widthがある場合は上書きされないためです。

たとえば、min-widthが0の場合、mobile.cssが使用され、min-width 700の場合はlaptop.css、min-width 1000の場合はdesktop.cssが使用されます。画面の幅が800pxの場合、モバイル.cssが使用され、laptop.cssも使用されますが、desktop.cssは使用されません。逆の場合、すべての画面の最小幅が0pxであるため、mobile.cssは毎回オーバーライドします。

于 2012-12-10T20:58:05.367 に答える