TIL#4|CSSメディアクエリー


メディアクエリ


まず、メディアクエリは、特定の条件(端末タイプ、画面解像度、ビューポート幅など)で特定のスタイルを適用する機能です.
最も一般的な理由は、ユーザ画面のサイズに応じて最適化された画面を表示するためである.
@media screen and (min-width:801px) and (max-width:1000px){
  body{background:pink;}
}

@media screen and (max-width:800px){ 
  body{background:royalblue;}
}

メディアクエリーを使用すると、上記のように画面の幅値に基づいてcssを変更できます.
使い方は簡単ですが、反応型ページを作成するときに本当に役立つ機能です.仕事が半分でなくても、20%減ります.