メディアクエリーの使い方について

Question

CSSのメディアクエリについて質問がございます。
とある本を参照しながらカフェのHPを作成しているのですが、
下記2パターンのCSSの違いがよくわかりません。

@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }

@media screen and(max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }

本には前者の方のCSSが記載してあったのですが、
ネットで調べてみると後者の書き方が圧倒的に多く困惑しております。
二つのCSSは全く同じ意味を指していますでしょうか？？

「screen and」というのは省略可能ということでしょうか。

それとも、別の意味合いになるのでしょうか？？

何卒よろしくお願い申し上げます。

Comments

[m.ts10806]

> 初学者なので質問のレベルが低いですがご教示いただけますと幸いです。
>ご回答いただけますと幸甚に存じます。
何卒よろしくお願い申し上げます。

この文字数を書くための労力を質問内容の充実にあててください。
「初心者だよ」と伝えたいのであれば質問に「初心者アイコン」をつけるだけで済みます。

[Baboo_12]

ありがとうございます！！
今後はそのようにいたします。

Answer 1

二つのCSSは全く同じ意味を指していますでしょうか？？

違います。後者のCSSは、screenの場合にしか適用されません。

よくあるパターンとして、印刷する場合はprintとなります。

Comments

[Baboo_12]

前者はallを暗黙に含んでいて、後者がscreenということですよね。
ありがとうございます！

Answer 2

「screen and」というのは省略可能ということでしょうか。

必要なければ省略すればよいです。（screenはメディアタイプ、省略するとallと同じ挙動になるはず）

【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax

メディアクエリは、任意のメディアタイプと任意の数のメディア特性の式で構成されます。論理演算子を使用して、複数のクエリを様々な形で組み合わせることができます。

Comments

[Baboo_12]

allは暗黙に含まれているのですね。
ありがとうございます。