異なるブラウザ幅で異なる CSS 宣言を使用する 一般的な解決策はメディア クエリを使用することですが、この解決策は IE9 より前のブラウザをサポートしません。
海外の人気 UI フレームワークである Bootstrap v3 は、メディア クエリ テクノロジを使用してグリッド レイアウトを実装しますが、IE8 と互換性を持たせたい場合 (IE6/7 は中国ではそれほど高いシェアを持っていないため、その必要はありません)。互換性がある必要があります)、Respond.js ソリューションを導入する必要があります。
このソリューションの原理は次の 4 つのステップに分かれています:
1. スタイル リンクの後に、respond.js を読み込み、スクリプトはその前に表示されたリンク ノードを配列に取得します。リンク配列内の CSS ファイルのテキスト コンテンツを再取得するための Ajax リクエスト
3. テキスト コンテンツ内の @media クラス宣言を分析することで、関連するスタイルを再計算して適用します
4. window.resize 時にトリガーします。 3 番目のステップのロジック
ここでの問題点は 2 つあります:
1. ステップ 2 ではリクエストが繰り返し消費されますか?
2. CSS 静的リソースのストレージ ドメイン名が現在のページと異なる場合、必然的に JS の同一オリジン ポリシーの制限に遭遇します。クロスドメインの問題を解決するにはどうすればよいですか?
基本的に、IE を含むすべてのブラウザは GET リクエストをキャッシュします。ブラウザは最初のステップですべての CSS ファイルをリクエストしているため、2 番目のステップではローカル キャッシュが直接使用されます。パフォーマンスの低下を引き起こします。ただし、IE パスの問題をハッキングするにはresponse.proxy.gif を参照する必要があるため、追加のリクエスト損失が発生する可能性があります。
質問 2 は存在します。Respond.js は、iframe プロキシ ファイル ソリューションを通じて同一オリジン ポリシーを突破します。詳細については、この記事「Respond.js で IE6-8 が CSS3 メディア クエリをサポートできるようにする」を参照してください。または Baidu 関連の JS を自分で作成する クロスドメインの知識。ただし、Respond.js のシナリオでは 2 つの問題が発生します:
1. iframe の作成は非同期であるため、respond.proxy.js はレンダリングをブロックできず、必然的にページ スタイルがちらつきます (デフォルト スタイルが適用されます)。 1 つ目、2 つ目 (3 段階のスタイル分析が完了すると、スタイルが再適用されます)
2. CSS リソース要求が完了したときに iframe プロキシ ファイル イベントをアクティブにコールバックできないため (子 iframe はアクセスできません)ただし、親ウィンドウの A タイマーを通じて子ウィンドウの window.name 値を継続的に読み取って受動的通信を実装するため、スタイルのレンダリングにさらに遅延が発生します。
使用シナリオが質問 2 の悪影響を受け入れられない場合 (感傷的なフロントエンド エンジニアは、Web ページのパフォーマンスを向上させるために静的リソースを独立したドメイン名にデプロイし、ページの明白な再描画を受け入れることができません) 経験損失) 、他の解決策を検討する必要があります (さらに、Respond.js プロジェクトの作成者は数年間このプロジェクトをメンテナンスしておらず、いくつかのバグはまだ修正されていません)。この記事では、参考のために、この問題に対する SASS + JS ベースの解決策を提案します。アイデアは次のとおりです:
1. 通常、画面の解像度幅は特定の仕様に準拠しており、PC Web サイトのグリッド レイアウトの一般的な幅は次のようになります: 1024px、1280px、1440px、1600px、1920px
2。スタイルでは、さまざまなブラウザ幅に合わせて、body{}、.w1280px body{}、.w1440px body{} などの複数のスタイル ルールをオーバーライドして、パーソナライズされた目的を達成できます
3. window.resize のときに、動的に変更します。例えば、width width = 1620px の場合、 width > 1600px && width
@mixin mediaWidth($min-width: 1024px, $max-width: null) { $widthSet: (1024px, 1280px, 1440px, 1600px, 1920px); $selector: (); @if $max-width { @media only screen and (min-width: $min-width) and (max-width: $max-width){ @content; } } @else { @media only screen and (min-width: $min-width) { @content; } } @each $item in $widthSet { @if $max-width { @if $item >= $min-width and $item < $max-width { $selector: append($selector, unquote('.w#{$item} &'), 'comma'); } } @else { @if $item >= $min-width{ $selector: append($selector, unquote('.w#{$item} &'), 'comma'); } } } #{$selector}{ @content; }}body{ width: 1024px; background-color: red; @include mediaWidth(1024px) { width: 1024px; background-color: orange; } @include mediaWidth(1280px, 1440px) { width: 1280px; background-color: green; } @include mediaWidth(1600px) { width: 1600px; background-color: blue; }}
上記の SASS コンパイル後の CSS は次のとおりです:
body { width: 1024px; background-color: red;}@media only screen and (min-width: 1024px) { body { width: 1024px; background-color: orange; }}.w1024px body, .w1280px body, .w1440px body, .w1600px body, .w1920px body { width: 1024px; background-color: orange;}@media only screen and (min-width: 1280px) and (max-width: 1440px) { body { width: 1280px; background-color: green; }}.w1280px body { width: 1280px; background-color: green;}@media only screen and (min-width: 1600px) { body { width: 1600px; background-color: blue; }}.w1600px body, .w1920px body { width: 1600px; background-color: blue;}
質問 1: SASS がプロジェクトで使用されていない場合はどうなりますか?
実際のプロジェクトの経験から、SASS の導入によりスタイル ファイルの保守性が大幅に向上し、保存時にエディターのコンパイル ツールを直接使用してファイルを同期的にコンパイルできるため、フロントエンド プロジェクトのプロセスには影響を与えません。 Sass コマンドライン、compass、grunt、gulp などのツールはもちろん、sublime text の sass build や build on save プラグインなどの CSS ファイルも含まれます。
質問 2: SASS を知らない場合はどうすればよいですか?
この「SASS 使用ガイド」を読めば、それを学ぶだけで、それがどれほど簡単であるかがわかるでしょう。
上記のコード例については、このデモを参照してください: http://yekai.net/demo/ie-media-query.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
