メディアクエリの使い方

Question

前提・実現したいこと

サイト作成の時のメディアクエリのメディアタイプの書き方

@media(max-width:800px){}　でレスポンシブできるのになぜ
screen and とかのメディアタイプをなぜ入れるのでしょうか？

例えば、プリンターに適用の際printをかかずに@media(max-width:800px){}
で適用されるのに、なぜ書くのでしょうか？

このメディアだけに表示させたいとかだったら使う意味はわかるのですが・・・。
webサイト作成の時に入れないと不便な事はあるのでしょうか？
不思議で仕方ないのでご先輩方、お教え宜しくお願い致します。

発生している問題・エラーメッセージ

@media(max-width:800px){}

該当のソースコード

@media only screen and(max-width:800px){}

試したこと

色んなサイトをみましたが、載ってなくこちらに書き込みさせて頂きました。

Comments

[Lhankor_Mhy]

「印刷の時だけ適用したいときでもprintいれずにできる」という現象が再現できませんでした。
再現するコードをご提示ください。

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

問題が発生する条件を具体的に書きましょう
https://teratail.com/help/question-tips#questionTips3-5-3

[shakeneko]

すみません、間違っていました。質問内容を編集します。
お返事有難うございます。

Answer 1

こんにちは。

__例えば、プリンターに適用の際printをかかずに@media(max-width:800px){}

で適用されるのに、なぜ書くのでしょうか？__

印刷結果に違いが出ます。

---

まず前提ですが、ブラウザを印刷する時の解像度は、1インチ＝96pxです。
次に、A4用紙のサイズは、210mm*297mmです。
最後に、1インチ＝25.4mmです。

つまり、A4用紙は、およそ793px*1121pxです。

---

ですので、以下をA4縦で印刷した場合、divは黒く、pは赤くなります。

    @media screen and (max-width:800px) {
      div {
        color: red;
      }
    }

    @media(max-width:800px) {
      p {
        color: red;
      }
    }

  <div>div</div>
  <p>p</p>

そして、A4横で印刷した場合は、両方とも黒くなります（Firefox）。
なお、一部のブラウザ（Chrome）では縦と同じように、divは黒く、pは赤くなるようですが、理由は分かりません。
バグかもしれません。

Comments

[shakeneko]

大変貴重なご回答ありがとうございます。
印刷結果に違いがでるんですね・・・。

すみません、結果的に、Webサイトのメディアクエリは基本的に

@media(max-width:800px){}

で印刷とかするときはメディアタイプを変えるという認識で宜しいでしょうか？

[Lhankor_Mhy]

要件による、ということになるかと思います。

max-width:800px のレイアウトで印刷したいのであれば、@media (max-width:800px){}
max-width:800px のレイアウトで印刷したくないのであれば、@media screen and (max-width:800px){}

[shakeneko]

分かりました、何回もご回答頂き有難うございました！

[Lhankor_Mhy]

ご解決されて何よりです。

あまりいろいろ考えずにこれで通せばいい、というものが欲しいのであれば、@media screen and (max-width:800px){} を使った方がいいです。

Answer 2

MDNなどで仕様を確認したうえで、いろいろ試した方が良いと思います。
メディアクエリの使用
CSS: カスケーディングスタイルシート
@media

Comments

[shakeneko]

ご回答ありがとうございます。
見てもよく分からなかったのですが、@mediaだけでいいということでしょうか？

[m.ts10806]

仕様を確認したうえで、”””いろいろ試した方が良い”””と思います。