1

index.htmlドキュメントのヘッド内に次のスタイルシートリンクコードがあります。

<link href="static/css/mobile.css" rel="stylesheet" media="screen and (max-width: 739px)">

ただし、1920pxのワイドスクリーンでは、chromeとfirefoxの両方がmobile.cssをロードします。コンテンツを無視しているように見えます。ページのレンダリングにかかる​​時間は約2倍になります。

メディアクエリを満たさない場合にCSSファイルが読み込まれないようにする方法はありますか？（私はいくつかの.jsで生きることができると思います）または私はそれを間違って実装しましたか？

ブラウザがファイルをロードして無視するのは明らかに間違っているようです。

4

2 に答える 2

2

残念ながら、ブラウザは、たとえ一致しなかったとしても、常にメディア クエリをロードします。詳細については、こちらをご覧ください。

http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

また、この記事では、これを防ぐ方法を示します。要するに、次のようになります。

  1. CSS ではなく JS を使用したテスト クエリ: window.matchMedia('screen and (max-width: 739px)');.
  2. 次に、一致する場合は、次のような CSS を追加します。document.write('<link rel="stylesheet" href="small.css">');

実際の記事にはそれを含めるためのより良い方法がdocument.writeあるので、チェックしてください。

于 2013-02-23T16:56:22.720 に答える
0

これが私が最後に使ったものです。少しjqueryを使用しますが、必要に応じてjqueryから変換することもできます。

まず、次のようにhtmlを設定します。

<link class="matchmedia" data-href="static/css/mobile.css" data-rel="stylesheet" data-max="739">

data-maxは、最大幅をチェックするように以下の関数に指示する方法です。関数が呼び出されると、「matchmedia」というクラスを持つ要素が検索され、data-maxとdata-minで指定した制約がテストされます。これらのテストに合格すると、名前の属性のコピーが作成されます。 「data-」で始まり、値もコピーします。そして、ちょっとプレスト私たちは条件付きの読み込みがあります。

ws.width = <your favourite method of getting the width>;

function mediaMatchHTML() {
$(".matchmedia").each(function(){
    var min = this.getAttribute("data-min");    //in pixels
    var max = this.getAttribute("data-max");

    //Check condition
    if ((min === null || ws.width >= min) && (max === null || ws.width <= max)) {
        for (var c=0; c<this.attributes.length; c++) {
            var name = this.attributes[c].name.slice(5);
            if ("data-"+name == this.attributes[c].name) {  //is this lined up for conversion?
                this.setAttribute(name, this.attributes[c].value);
            }
        }
    }
});
}
于 2013-02-27T15:10:33.033 に答える