メディア特性とは
本日の教材動画はこちら
メディア特性について
メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょう
- width … 表示領域の横幅
- height … 表示領域の高さ
- max-width … 表示領域の横幅（この後の指定が適応される最大値）
- min-width … 表示領域の横幅（この後の指定が適応される最小値）
- device-width … デバイスの横幅
- device-heigh … デバイスの縦幅
- orientation … デバイスの向き（スマホ・ダブれっと向けの設定）
orientationは縦長がportrain、横長はlandscapeで指定します。使い方ですが、外部CSSで指定する場合このようになります。
＠media screen（min-width:480px）and（max-width:720px）｛CSSを記述｝ これで480~720pxまでのディスプレイはこのCSSを適応する事。という感じになります。レスポンシブサイトを作る場合はこの設定が必須のようですので、とても大事な要素と言えますね！
【参考サイト】
