IE6~8のレスポンシブレイアウトを解決するためのresponse.jsの使い方-jsチュートリアル-php.cn

IE6~8のレスポンシブレイアウトを解決するためのresponse.jsの使い方

一个新手

リリース： 2017-09-07 09:54:38

オリジナル

1317 人が閲覧しました

レスポンシブレイアウトは、理想的にはさまざまなPC/モバイル端末に対応します。メディアクエリは IE9 以降およびその他の最新ブラウザでサポートされていますが、市場では IE8 が依然として比較的大きな市場シェアを占めているため、IE ローエンドブラウザを考慮する必要があります。

では、レスポンシブレイアウトをIE6〜8ブラウザに対応させるにはどうすればよいでしょうか？ここでは、respond.js というファイルを使用する必要があります。ファイルのダウンロードアドレス: https://github.com/scottjehl/Respond。

お友達の皆様へのお知らせですが、respond.js を使用する際に注意しなければならない点がいくつかあります。注意しないと IE6-8 では表示されません。

基本スタイルを作成する

レスポンシブレイアウトを実装するには、まず基本的なレスポンシブレイアウトスタイルを作成する必要があります。
コードをコピーします

html,body {    
    height: 100%;}@media only screen and (min-width: 480px){    
        body {        
        background: yellow;    
}}
@media only screen and (min-width: 640px) and (max-width: 1024px) {    
    body {        
    background: green;    
}}
@media screen and (min-width: 1024px){    
    body {        
    background: blue;    
}}

ログイン後にコピー

プラグインの原理

次に、respond.jsの実装アイデアを理解する必要があります:
最初のステップは、外部から導入されたすべての CSS ファイルパスを head に取り出し、配列に格納することです。 2 番目のステップは、配列を走査して AJAX リクエストを 1 つずつ送信することです。 3 番目のステップでは、AJAX コールバックの後、応答内のメディアクエリの min-width および max-width 構文を分析し (min-width と max-width のみがサポートされることに注意してください)、対応する CSS ブロックを分析します。ビューポート変更間隔
4 番目のステップは、ページの初期化と window.resize 中に現在のビューポートに従って対応する CSS ブロックを使用することです。

核となる結論

この時点で、基本的な実装のアイデアに基づいて、コードを記述するときに注意すべき点がいくつかわかります。 1. ローカルサーバー (localhost) を起動する必要があり、通常のローカル URL アドレス (file:// で始まる) は使用できません。 2. CSS ファイルは外部からインポートする必要があり、CSS スタイルをスタイルで記述することは無効です。 3. 応答プラグインは CSS ファイルを検索して処理するため、応答ファイルは CSS ファイルの後に配置する必要があります

4. また、response を頭または体の後ろに配置することで実現できますが、頭の中に配置することをお勧めします (具体的な理由は以下のドキュメントのヒントに記載されています)
5. CSS に utf-8 エンコーディングを設定せず、デフォルトを使用することをお勧めします (詳細については、以下のドキュメントのヒントのセクションを参照してください)

ドキュメントのヒント

公式ドキュメントのいくつかのヒント: 1. 応答.js ファイルを導入するのが早ければ早いほど、IE で表示されるスプラッシュ画面を回避できる可能性が高くなります。 2. ネストされたメディアクエリはサポートされていません

3. utf-8の文字エンコードはresponse.jsファイルの動作に影響します

公式 API のオリジナルテキスト: CSS ファイルが Byte-Order-Mark を使用して UTF-8 でエンコードされている場合、IE7 または IE8 の Respond.js では機能しません。基本的な意味は、utf-8 形式の CSS ファイルの文字エンコーディングがプラグインに影響するということです。
ただし、IE6-8でテストしてみると（cssファイルにcharset設定を追加しても、linkタグにcharset設定を追加しても）正常に表示できます。したがって、この位置バグが何を意味するのかはあまり明確ではありません。
4. クロスドメインのスプラッシュ画面が表示される場合があります (まだテストされていないため、具体的な状況は不明です)

インスタンスのデモ
<!doctype html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title>HTML5-响应式布局--respond.js-独行冰海</title>
        <link rel="stylesheet" href="test.css" charset="utf-8">
        <script src="respond.min.js"></script>
</head>
    <body>
        <p class="wrap" id="con">        
        让IE6~8支持响应式布局</p>
    </body>
</html>
ログイン後にコピー

注: 上記のように、response.min.js またはresponse.src.js を使用できます。ダウンロードアドレスからダウンロードできます。 CSS 部分はコードの先頭部分です。

表示効果 (IE6 および IE7-8 の表示効果は問題ないため、ここではマッピングを扱いません):

検討中

公式ドキュメントはまだ明確な内容を解釈していません (主に明確ではありません)適用方法)

<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<script src="/path/to/respond.proxy.js">
</script>
ログイン後にコピー
レスポンシブレイアウトをサポートするその他のプラグイン - css3-mediaqueries-js css3-mediaqueries-js には公式ドキュメントやデモがありません。response.js と比較して、css3-mediaqueries-js はほぼすべてのメディアをサポートします。クエリ構文。スプラッシュ画面が表示されます。すべてのメディアクエリをサポートできますが、実際には min-width と max-width で応答性の高いレイアウトのニーズを満たすことができます。
CDN サポート
IE9 が CSS3 をサポートしていることを考慮すると、HTML ページの head タグにスクリプト参照を直接追加できます:

以上がIE6~8のレスポンシブレイアウトを解決するためのresponse.jsの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。