CSS3 - モバイルサイトとメディアのクエリ

Question

テストと学習のためのちょうど私は小さなモバイルウェブサイトを作成しようとしています。しかし今のところ、私はスタイルシートのターゲット設定に小さな問題があります。私は、このような方法でそれをやっている：

<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ピクセルなど）にも表示された後。 Opera Mobileエミュレータでウェブサイト（モバイル版）をテストします。私は間違っているの？あなたは間違って何をしている

おかげ

Answer 1

は、あなたのスタイルシートの選択のみスタイルシートのうちの1つを含むことを考えることです。あなたはmin-widthに含ま

スタイルシートは、大きい任意の解像度のために含まれることになるので、例えば、私は600PXワイドスクリーンを持っている場合、私はsmall.css、medium.css、large.cssとwide.cssだけでなく、wide.cssを取得します。

（私は200pxのワイドスクリーンを持っている場合にも、それはまったくのスタイルシートが含まれていないでしょう...）

あなたはそれが唯一のスタイルのうちの1つを含んで作ることmin-widthとmax-widthの両方を使用する必要がありますシート。