メディアクエリ

レスポンシブWebデザインのメディアクエリについてのメモ

cssファイルやscssファイル内にてメディアクエリを指定することで、
タブレットやスマートフォン、または規定外の大画面にも対応できる様なcssを作成できる。
width等でのcssが切り替わる境目をブレイクポイントと呼ぶ。
ブレイクポイントは実際のビューが崩れそうなタイミングをとっても良いが、特に何もなければ、
1170pxと670px付近でブレイクポイントを取ると良い。

scssファイル

@media (min-width: 1170px {
  h1 {
    color: pink;
  }
}
@media (min-width: 670px {
  h1 {
    color:white;
  }
}
@media (max-width 670px {
  h1 {
    color: blue;
  }
}

別件だが、width: 25%;　を4つ並べてビュー崩れが起こる場合は、
borderやpaddingも含まれているため、box-sizing: border-box;を与えてやると直る。
これは全てに与えてやることが推奨されている。

scssファイル

* {
  box-sizing: border-box;
}