初歩的な内容ですが、苦手意識があったので自分のためにまとめ。
タイトルにある通り、@media を使ってレスポンシブデザインに対応する方法についてです。
参考にさせていただいた記事はこちらから。
CSS – @media – とほほのWWW入門
https://www.tohoho-web.com/css/rule/media.htm
毎回、max-width と min-width が混ざってしまって分からなくなるんですよね…。
サンプルコードはこちら。
@media (max-width: 1024px) {
/* 1024px 以下の場合に適用したい CSS を記述 */
}
max-width: 1024px は、最大の横幅が 1024px という意味なので、画面サイズがその幅以下の場合にのみ内容が反映される、という意味になります。
また、複数条件を指定したい場合は下記のようになります。
@media (min-width:768px) and (max-width:1200px) {
/* 幅が 768px 以上かつ 1200px 以下の場合に適用したい CSS を記述 */
}
上記は And 条件の場合ですが、Or 条件の場合は、and ではなく , で区切ればOKです。
今回は複数条件は使いませんでしたが、PC、タブレット、スマートフォンでそれぞれ CSS を変更したい場合には使いそうですね。
…書いてて思いましたが、やっぱり分かりにくい！
これは参考サイトをブックマークしておいて、都度確認しながら使う方が早そうな気がします。
あとは、Google Chrome 等の検証ツールをガンガン使いましょう。
蛇足ですが、@media では、画面サイズでの判断以外にも、ディスプレイで表示する場合と印刷の場合で、指定する CSS を変更することができるとのことです。
もしくは、端末の画面がモノクロかどうかや、解像度でも切り分けができるらしいです。
例えば、印刷の時は文字サイズを大きくして読みやすくするとか、特定の範囲だけ消す、とかができるとかでしょうか？
まだ使ったことがないですが、これは便利かもしれませんね。
できるということだけでも覚えておきたいと思います。
以上、CSS の @media を使ってレスポンシブデザインに対応する方法についてでした。
ご参考になれば幸いです。
