1

Web サイトのレスポンシブ デザインを作成しています。

このために、2 つの個別の css ファイルを作成しました。

<link rel="stylesheet" type="text/css" media = "screen and (min-device-width: 500px) and (max-device-width: 1500px)" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 500px)" href="mobile.css" />

どの電話から見ても問題なく動作します。しかし、PC でブラウザのサイズを変更しても、スタイルシートは変更されません。

私は両方のことが起こることを望んでいます。スタイルシートは、デバイスの幅が変更された場合、またはブラウザー ウィンドウのサイズが変更された場合の両方で変更する必要があります。

4

2 に答える 2

2

/の代わりにmin/max-device-widthを使用します。minmax-width

<link rel="stylesheet" type="text/css" media = "screen and (min-width: 500px) and (max-width: 1500px)" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />

スタイルシートは、デバイスの幅ではなく、ビューポートの幅に依存するようになりました。おそらく、モバイル デバイスのビューポートの幅はデバイスの幅と同じなので、これは一石二鳥です。

于 2012-12-08T16:07:36.213 に答える
0

すべての CSS コードを 1 つのファイルに入れたい場合:

@media (min-width: 501px)  {
  //put your desktop styles here
}

@media (max-width: 500px) {
  //put your phone design here
}
于 2012-12-08T16:07:39.567 に答える