フォントサイズ、余白、幅などの指定は相対的に
レスポンシブデザインのポイントになるのは「サイズ」。
「サイズ」は、画面の幅によって動的に変動させる。
また、ブレークポイントによって異なるサイズを指定しないといけない。
このとき、いろいろなパーツに個別のサイズを指定していたのでは管理が大変。
なので、その画面の起点となるサイズを定めたら、それの比率で他のサイズを決めていく。
ブレークポイントごとに、その起点のサイズを変える。
以下は、サンプル。
sample.sass
/* mixin：タイトルの集合 */
+titles($baseFontSize).titlefont-size:$baseFontSize.sub-titlefont-size:$baseFontSize*0.8/** デスクトップ以外 **/
//デスクトップの基準サイズ$pcBaseSize:1vw.container=titles($pcBaseSize)/** デスクトップ以外 **/
@mediascreenand(max-width:$desktop)//デスクトップの基準サイズ$spBaseSize:3vw.container=titles($spBaseSize)
コード量を減らせるだけでなく、文字間のバランスを統一的にできるので、個別指定よりは相対的な指定をする方がよいと思います。
「多行は悪」がコーディングの指針ですね。
