デスクトップ用の既存の CSS (desktop.css) があるとします。iPad Safari cssを含めたい。
desktop.css では、最後に条件付きインポートを行うことはできますか?
@media only screen and (device-width : 768px)
{
@import "ipad.css"
}
ipad.css には、iPad 関連のスタイルのみが含まれます。 /* iPad スタイル */
つまり、iPad ユーザーの場合は ipad.css がインポートされ、それ以外の場合は無視されます。
最善のアプローチは何ですか？
desktop.css では、最後に条件付きインポートを行うことはできますか?
実際には、いいえ、@imports は他のスタイル宣言の前に来なければなりません。
しかし、あなたのケースでは、最初に iPad スタイルをインポートすると、デスクトップ スタイルによってすべて上書きされる可能性があります。したがって、そのメディアクエリで別の要素を使用し、代わり<link>にあなたを指す方が良いでしょう:ipad.css
<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">