備忘録的プログラミングリファレンス

@media

 条件ごとにスタイルを摘要するat-ruleの1つです。at-ruleは@-規則や@ルールと表現されたりします。

 プリンタやディスプレイなどのデバイスやブラウザ、適応中のスタイルなどの特性に応じてスタイルを設定することができます。
 @mediaに よって、サイトをPCでみる場合とモバイル端末で見る場合によってスタイル設定を変えることができます。

 メディアクエリは入れ子にすることができます。

表示幅によるスタイル変更

 表示するデバイスごとにスタイルを変更するには、@importでデバイスごとのスタイルシートを読み込む方が便利です。

@import url("./mobile.css") screen and (min-width:0px) and ( max-width:768px);

@import url("./pad.css") screen and (min-width:768px) and ( max-width:1024px);

@import url("./normal.css") screen and (min-width:1024px);