メディアクエリはどのようにデータを取得しますか？例えば

Question

：

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a style sheet --> 
<style> 
@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
} 
</style> 

及び方法CSS3は等デバイスおよびアスペクト比のデバイス及びタイプの最大幅と高さのデータを取得しますか？

[編集] 私が開発者として何かをする必要があるのは、私が把握しようとしているものの要点です。しかし、内部的な説明は（概念的にはうまくいけば）大いに評価されるでしょう！

Answer 1

まあ、デバイス/ビューポートからデータを取得するのは「CSS3」ではなく、以下「メディア」と呼ばれます。そのようなデータはブラウザによって入力されます。

これを実行すると、ブラウザはCSS内の各メディアクエリをループし、読み込まれたメディアデータと照合しようとします。一致する場合は、CSSが適用されます。

毎回これらのメディア件のデータのいずれかの変化があることを、ブラウザが知っていると知られているrepaint/reflow processesを起こし、再び全力を尽くします。

開発者として、私はあなたに言うでしょう：これらのケースではパフォーマンスについて心配しないでください。パフォーマンスのリファクタリングは、ページが実際に遅くなっている場合にのみ発生する必要があります。 5ミリ秒であなたのページ全体のレンダリング時間をスピードアップしようとすると、人間の目はそれを知ることができません。