以前の CSS ファイルが巨大化したため (CSS ファイルの 1 つが約 180kb ありました)、Web サイトの CSS を書き直しています。それは正常ですか？
Web サイトの CSS コードを保存する最も生産的で効率的な方法を知りたいです。最近のデバイスの性質上、デバイスを対象としたメディア クエリ (responsive.smartphone.landscape、responsive.tablet.portrait など) を作成することはできないと思います。さらに、ブレークポイント手法を使用すると、多くのメディア クエリが重複します。
重複するメディアクエリ用に別のCSSファイルを作成して、メディアクエリごとにCSSファイルを作成することを検討しています。ファイルの小さなコードのみがデバイス自体に関連している場合、200kb の CSS ファイルをスマートフォンやタブレットに送信する必要がないようにして、膨張を減らすにはどうすればよいですか?
スマートフォンなどの場合、以下に示すように、メディア クエリを css ファイル内からリンク要素に移動できます。このようにして、それぞれに対して 1 つの css ファイルのみをロードします。
<link rel='stylesheet' media='screen and (max-width: 320px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 321px) and (max-width: 768px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (min-width: 769px)' href='css/desktop.css' />
IE8以下はこのようなメディアクエリをサポートするとは思わないので、フォールバックも提供する必要があります:
<!--[if lte IE 8]>
<link rel='stylesheet' media='screen' href='css/desktop.css' />
<![endif]-->