レスポンシブコーディング：作業中のちょっとしたテクニック

html5/css3, responsive
Posted : 2022.3.25
Update : 2022.3.25

テクニック…というほど大げさなものではありませんが、
スムーズに作業を進めるためにやっていることがたくさんありますので、言語化できるものをいくつかご紹介できれば。

ブレイクポイントごとに文字色を変える

@media screen and (max-width : 1159px) {
	body{color: blue;}
}
@media screen and (max-width : 999px) {
	body{color: green;}
}
@media screen and (max-width :767px) {
	body{color: orange;}
}

実際は案件によって数字は異なりますが、だいたい上記のようなコードをcssファイルに書いています。
※納品前に消すことを忘れずに！

一通りコーディングが終わって、ウィンドウサイズ（横幅）を伸ばしたり縮めたりして表示確認をします。
どのサイズの時に表示が崩れていたり記述の調整が必要かがわかりやすいです。

BACK
NEXT