判定条件を使用してCSSファイルをインポートする

解決策 1: HEAD に次のコードを挿入するなど、HTML ドキュメントで条件付きインポートを使用します。

コードをコピー

コードは次のとおりです。

解決策 2: 次のコードに示すように、CSS ドキュメントの先頭で条件付きインポートを使用します。

コードをコピー

コードは次のとおりです。

[SafMobの場合]
'iphone.css' をインポートします。
[!SafMobの場合]
@import('non-iphone.css');

ブラウザが CSS を読み込む順序:
1. URLで指定されたHTMLページを読み込む
2. HTMLの解析
3. リンクタグで参照されている CSS ファイルをリモートで取得する
4. 取得した CSS ファイルを読み込んで実行します。コード @import url("xx.css") に遭遇すると、xx.css がリモートで取得されます。
5. xx.cssを読み込んで実行する
@import を使用すると、最大 31 個の CSS ファイルをインポートできます。CSS ファイルをリモートで取得するたびに http リンクが生成され、時間がかかるため、@import はできるだけ使用しないことが推奨されます。 31. これほど多くの数を使用するプロジェクトはないと思います。

<<: ろうそくを溶かす（水滴）サンプルコードを実現する純粋な CSS

>>: Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?