COWAZA

• html/css

• 2020.05.13

PCとスマホでデザインを切り替えるメディアクエリ・ブレークポイント

レスポンシブなウェブサイトで必要になるメディアクエリとブレークポイントです。

CSSのメディアクエリで見た目を変える

ブレークポイント画面の横幅749px以下に対応させるメディアクエリ

@media screen and (max-width: 749px){
ここにスタイルを記入
}

ブレークポイント画面の横幅750px以上に対応させるメディアクエリ

@media screen and (min-width: 750px){
ここにスタイルを記入
}

メディアタイプについて

上記のメディアクエリでは「screen」を設定しています。
この場合はPCやスマホの画面に対応しています。

プリントしたときに対応したい場合

@media print and (min-width: 750px){
ここにスタイルを記入
}

「print」にすると、プリンターでプリントアウトする際のみに指定できます。

複数の条件で対応させたい場合

ブレークポイント画面の横幅750px以上1000px以下に対応させるメディアクエリ

@media all and (min-width: 750px) and (max-width: 1000px){
ここにスタイルを記入
}

このように複数の条件を指定することも可能です。
なお、ここではmediaタイプを「all」に設定しています。
「all」の場合は、画面の「screen」、印刷の「print」や、音声の「speach」など全てに対応させます。