0

テストとcss3の学習のためだけに、小さなモバイルWebサイトを作成しようとしています. しかし、今のところ、スタイルシートのターゲットに小さな問題があります。私はそのような方法でやっています：

<link rel="stylesheet" media="only screen and (max-width: 180px)" href="xsmall.css" />
<link rel="stylesheet" media="only screen and (min-width: 240px)" href="small.css" />
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="medium.css" />
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="large.css" />
<link rel="stylesheet" media="only screen and (min-width: 540px)" href="wide.css" />

残念ながら、xsmall.css を変更した後、変更は他の Web バージョンでも表示されます (480px、540 px など)。Opera Mobile Emulator で Web サイト (モバイル 1) をテストしています。私が間違っていることは何ですか？

ありがとう

4

1 に答える 1

1

あなたが間違っているのは、スタイルシートの選択にスタイルシートが 1 つしか含まれていないと考えることです。

あなたが含めるスタイルシートmin-widthは、より大きな解像度に含まれるため、たとえば600pxのワイドスクリーンがある場合、 、、small.cssおよびmedium.cssだけlarge.cssでwide.cssなくwide.css.

(また、200px 幅の画面がある場合、スタイル シートはまったく含まれません...)

min-width両方を使用max-widthし、スタイル シートの 1 つだけを含める必要があります。

于 2012-04-10T11:51:15.547 に答える