2

ブラウザウィンドウのサイズが変更されたときにも応答するレスポンシブWebサイトを設計する必要があります。

ヘッドタグに次のコードを追加しました。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

そして、私は次のスタイルを含めました：

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

ただし、ブラウザウィンドウのサイズを480ピクセル未満に変更しても、ドキュメントはstyle.cssを使用してスタイル設定されますが、mobile.cssでスタイル設定されている必要があります。

私は何が欠けていますか？

4

1 に答える 1

3

max-device-widthウィンドウ幅のサイズではなく、デバイスの解像度を指します。つまり、min-width理解を深めるためにここmax-widthを参照してください。

device-widthモバイルデバイスをターゲットにしたいが、デスクトップの小さなサイズ変更されたウィンドウはターゲットにしない場合に使用されます。

したがって、mobile.css画面解像度の幅が未満のモバイルデバイスで使用し481px、デスクトップブラウザのウィンドウのサイズを以下に変更して含める場合は、次のよう481pxに置き換えます。

(max-device-width: 480px)

にとって：

(max-width: 480px)

mobile.cssメディアクエリルールで。

于 2012-11-30T10:26:28.153 に答える