0

CSS のみを使用して、サイトのモバイル再設計を行っています。

デスクトップまたはモバイルのいずれかに適切な css を提供する次のメディア クエリを用意します。

ただし、ブラウザのサイズを 855 未満に変更すると、デスクトップには引き続きモバイル css が表示されます (一部のモバイル css ファイルのみのようですが)。

デスクトップがモバイルCSSをロードしないようにするにはどうすればよいですか?

ありがとう

<link rel="stylesheet" type="text/css" href="css/layout.css" media="Screen and (min-device-width:855px),projection" />
<link rel="stylesheet" type="text/css" href="css/nav.css" media="Screen and (min-device-width:855px),projection" />
<link rel="stylesheet" type="text/css" href="css/type.css" media="Screen and (min-device-width:855px),projection" />

<link href="css/mobile.css" type="text/css" media="handheld, handheld and (max-device-width: 854px), only screen and (max-device-width: 854px), only screen and (max-width:854px)" rel="stylesheet" />
<link href="css/mobile-nav.css" type="text/css" media="handheld, handheld and (max-device-width: 854px), only screen and (max-device-width: 854px), only screen and (max-width:854px)" rel="stylesheet" />
<link href="css/mobile-type.css" type="text/css" media="handheld, handheld and (max-device-width: 854px), only screen and (max-device-width: 854px), only screen and (max-width:854px)" rel="stylesheet" />

敬具

4

1 に答える 1

1

モバイル スタイルシートのメディア クエリの最後に次のルールがあります: only screen and (max-width:854px). これにより、ブラウザが 855px 未満にサイズ変更されたときにスタイルシートが適用されます。幅が 854 ピクセル以下のデバイスにのみスタイルシートを適用する場合は、max-device-widthプロパティのみを使用します。

于 2012-12-31T00:01:48.627 に答える