デスクトップとモバイルブラウザ用のレスポンシブデザインに特定のCSSファイルを組み込む方法

Question

モバイルとデスクトップのブラウザ用に動的なデザインを実装することをお勧めします。

<link rel='stylesheet' media='only screen and (min-width: 1441px)' href='css/main.css' /> 
<link rel='stylesheet' media='only screen and (max-width: 320px)' href='css/design320.css' /> 
<link rel='stylesheet' media='only screen and (max-width: 360px)' href='css/design360.css' /> 

が、私の問題は、私は320PX幅解像度をテストしていていてもdesign360.cssがまだダウンロードされていることである。これまでのところ、ここで私の実装です。

特定の解像度のデザインを組み込むソリューションはありますか？

Answer 1

min-width属性も追加してみてください。唯一max-widthが供給されるため

<link rel='stylesheet' media='only screen and (min-width: 321px) and (max-width: 360px)' href='css/design360.css' /> 

は今、あなたの第二と第三のスタイルシートは、任意のページ未満360pxワイドに適用されます。