メディアクエリの使い方

前提・実現したいこと

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

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

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

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

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

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

該当のソースコード

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

試したこと

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

Lhankor_Mhy

2021/02/12 05:52

「印刷の時だけ適用したいときでもprintいれずにできる」という現象が再現できませんでした。再現するコードをご提示ください。ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 問題が発生する条件を具体的に書きましょう https://teratail.com/help/question-tips#questionTips3-5-3

shakeneko

2021/02/12 06:03

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

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは。

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

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

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

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

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

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

html
1    @media screen and (max-width:800px) {
2      div {
3        color: red;
4      }
5    }
6
7    @media(max-width:800px) {
8      p {
9        color: red;
10      }
11    }

css
1  <div>div</div>
2  <p>p</p>

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

投稿2021/02/12 07:20

Lhankor_Mhy

総合スコア36115

shakeneko

2021/02/12 07:35

大変貴重なご回答ありがとうございます。印刷結果に違いがでるんですね・・・。すみません、結果的に、Webサイトのメディアクエリは基本的に @media(max-width:800px){} で印刷とかするときはメディアタイプを変えるという認識で宜しいでしょうか？

Lhankor_Mhy

2021/02/12 07:48

要件による、ということになるかと思います。 max-width:800px のレイアウトで印刷したいのであれば、@media (max-width:800px){} max-width:800px のレイアウトで印刷したくないのであれば、@media screen and (max-width:800px){}

shakeneko

2021/02/12 08:21

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

Lhankor_Mhy

2021/02/12 08:27

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

行動規範の内容に同意します