media の幅の条件が 3 つある CSS
600px の max-width と、48em の min-width・64em の max-width を含む CSS の例です。ブレークポイントの一覧を示します。
入力
CSS
@media (max-width: 600px){.a{x:1}} @media (min-width:48em) and (max-width:64em){.b{x:1}}HTML(クラスの突き合わせ用。空ならクラスの一覧だけ)
<p class="a b">
結果
エラー 0 件・警告 0 件・情報 0 件
指摘(エラー・警告・情報)
指摘はありません。
| CSS のクラス | 2 種類 |
|---|---|
| 未使用の候補 | 0 種類 |
| media の幅の条件 | 3 種類 |
クラスと幅の一覧
| 種類 | 名前・条件 | CSS での出現 | 状態 |
|---|---|---|---|
| クラス | .a | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .b | CSS に 1 回 | HTML で 1 回使用 |
| media の幅 | 600px(max-width) | ブレークポイント | |
| media の幅 | 48em(min-width) | ブレークポイント | |
| media の幅 | 64em(max-width) | ブレークポイント |
検算(この結果になる理由)
最初の @media から 600px(max-width)、2 つ目から 48em(min-width) と 64em(max-width) が読み取れ、全部で 3 種類です。a と b はどちらも HTML で使われています。
判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。
このツールの制約
- スクリプトで後から付けるクラス(classList の追加など)や、別のページだけで使うクラスは判定できません。「未使用の候補」は削除してよいという意味ではありません。
- クラス名のエスケープ(.sm\:flex のような書き方)、属性セレクタ [class~=x]、CSS の入れ子の展開には対応していません。
- HTML の class 属性との細かい一致規則(ページのモードによる大小の扱いなど)は、このツールでは区別せず、大文字小文字を区別する単純な比較にしています。
- CSS を書き換えたり、不要な部分を自動で削除したりはしません。一覧を見て自分で判断してください。
ご利用にあたって
- 結果は候補です。削除する前に、ビルド後の全ページとスクリプトで使われていないことを確認してください。
- クラスの細かい一致規則は単純な文字列比較で近似しています。