34

（これはすでに回答されている可能性がありますが、回答が見つかりませんでした）

従来の @media クエリ オーバーライドは、1 つのサイズ/メディアのすべてのオーバーライドを同じブラケット グループにグループ化する傾向があります。

例えば

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

Sass には、次のように、ネストされた宣言内で @media クエリのオーバーライドを記述するための非常に気の利いた方法があります。

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

現在、コンパイル時に sass は @media クエリ ブロックをグループ化しないため、出力は次のようになります。

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
}
@media screen and (max-width: 320px) {
  .biography {
    font-size: 1.5em;
  }
}

私は最近のプロジェクトでこの手法を使用しましたが、その原則をより大きなプロジェクトに適用すると、css 全体に複数の @media クエリ セクションが拡散することになります (これまでに約 20 あります)。

sass の手法は、オーバーライドの流れを簡単に追うことができる (また、物事を移動するのも簡単になる) ため、非常に気に入っています。

ただし、特にパフォーマンスに関して、CSS を介して複数の @media セクションを使用することに不利な点があるかどうか疑問に思っています。

chrome css プロファイラーを試しましたが、@media クエリに固有のものは何も表示されませんでした。

( @media in sass の詳細については、このページを参照してください)

4

2 に答える 2

17

パーティーには少し遅れていますが、以下のテストに基づくと、パフォーマンスへの影響は最小限のようです. このテストは、それぞれ 2000 の個別のメディア クエリと結合されたメディア クエリを使用したサンプル ページのレンダリング時間を示しています。

http://aaronjensen.github.com/media_query_test/

主な利点は何よりもファイル サイズにあるようです。本番用に CSS を圧縮している場合は、とにかく大幅に削減されます。

しかし、最終的には、以下のリンクされた投稿にあるように:

「CSS に 2000 以上のメディア クエリがある場合は、gem を使用して CSS を再処理するのではなく、UI 開発戦略を再検討することをお勧めします。」

問題を詳述したブログ投稿: https://web.archive.org/web/20140802125307/https://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

于 2013-03-26T17:35:24.763 に答える
1

メディア クエリ チェックを 1 回実行する (そしてその中のすべてのスタイルをロードする) だけで、すべてのセレクターをチェックするよりも負担が少なくなると思いますが、これについて確固たる証拠はありません。Chrome の Canary リリースを取得すると、そこにメディア クエリ ツールが含まれます。

SASS を使用しているので、この記事は興味深いかもしれません - http://css-tricks.com/media-queries-sass-3-2-and-codekit/

于 2012-07-24T09:16:20.623 に答える