この記事で説明していること
- メディアクエリについて
- メディアクエリの書き方
- その他
メディアクエリについて
メディアクエリとは、Webページの見栄えを記述するCSS3で追加された仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替えることが出来る機能のこと。
画面サイズに応じてcssを変更することが出来る。
メディアクエリの書き方
<link rel="stylesheet" href="css/style.css" media="screen">
上記コードをhtmlに記載
@media screen and (min-width:299px){
/*299px以下で適用する内容*/
}
@media screen and (min-width:300px){
/*300px以上で適用する内容*/
}
@media screen and (min-width:600px){
/*600px以上で適用する内容*/
}
上記コードをcssに記載
これで各画面サイズごとにcssを変更することが出来ます。