vwを使って、ウィンドウ幅によらずデザイン通りの比率にしたいときのmixin小技

どのウィンドウ幅でもデザイン通りの比率に見えるようにコーディングしたいというときがあると思います。

単位vwを使えば再現可能なのですが、自力で計算してやっているとめんどくさすぎて泣いちゃいます。

そんなときは、sassのmixinを使いましょう！

実装

vwは、モニターの横幅を基準に、何%の大きさかを指定できる神単位です。

例えば .block { width: 50vw; } と指定すると、ウィンドウ幅1800pxのときは横幅が900pxだった.blockが、ウィンドウ幅900pxのときは、横幅450pxになるということです。

考え方として、「どのウィンドウ幅でもデザイン通り」ということは、例えば1366pxのデザイン中である要素の横幅が200pxだったとすると、デザインと要素の比率をそのままvwになおしてやればよいので、

width = ((200 / 1366) * 100) vw

となります。

((要素の大きさ / デザインの横幅) * 100)

ということですね。

これはwidthだけでなく、height、font-size、margin/paddingなど、単位がつくものはだいたいすべてに使えますので、上記の計算式を当てはめることで、ウィンドウ幅によらずデザイン通りの比率を再現することができます。

ただこれを電卓でやっていくのはしんどいので、mixinを使っちゃいましょう！sassやmixinが使えない人は、がんばってください！

関数はこんな感じ↓

$pcDesignSize: 1366;
$spDesignSize: 750;

@function vw( $size: 16 ) {
  $vw: $size * (100 / $pcDesignSize) + vw;
  @return $vw;
}
@function svw( $size: 16 ) {
  $svw: $size * (100 / $spDesignSize) + vw;
  @return $svw;
}

$pcDesignSize: 1366;

$spDesignSize: 750;

@function vw( $size: 16 ) {

$vw: $size * (100 / $pcDesignSize) + vw;

@return $vw;

}

@function svw( $size: 16 ) {

$svw: $size * (100 / $spDesignSize) + vw;

@return $svw;

}

PCデザインサイズとスマホデザインサイズを変数として持たせておけば、あとで全体の調整をしたいときとか、別のサイトで使いまわしたいときに便利です。

$size: 16にしているのは僕がデフォルトのfont-sizeに合わせて適当にやってるだけなので、ここはなんでもいいです。

あとはスタイルを指定するときに、デザイン上でのサイズと同じ数値で

.block {
  font-size: vw(20);
  width: vw(265);
  height: vw(70);
  padding-top: vw(16);
}

.block {

font-size: vw(20);

width: vw(265);

height: vw(70);

padding-top: vw(16);

}

このように書いてやりましょう。pxをvw()に直すだけですね。

以上、現場からでした。