可変レイアウトはvwが便利

最近、比率をキープしつつずっと可変していく実装をいくつかやって、
例えば、ブラウザ幅1900pxのときに文字サイズ32px、要素間のマージン100pxになるように、ブラウザ幅を基準に比率がずっとキープされるやつ。

文字サイズはvwが便利で使ってて、マージンとか幅サイズとかは計算めんどい%(親要素基準になるし、なんかFireFoxでうまくできんとか)でやってたんだけど、あるときvwってマージンとか幅にも使えるよな??って気づいて使ってみたら可変レイアウトの実装がだいぶ楽になった、、
(ちなみにvwは親要素関係なくブラウザ幅にあわせて設定できる単位)

vwの使い方は、例えば幅1900pxのpsdもらったならこんな感じ。

.hoge {
  // (100 / psdの幅) * (psd上のフォントの高さpx)
  // psdの幅が1900pxで、対象文字のフォントサイズが32pxなら
  // 100 / 1900 * 32
  font-size:1.684210526vw;
  
  // 要素間のマージンが↑のpsdで46pxだったら
  // 100 / 1900 * 46
  margin-top:2.421052632vw;

  // こういうプロパティでもOK
  // ↑のpsdで36pxだったら
  // 100 / 1900 * 36
  border-radius:1.894736842vw;
}

もっとはやく気づいてれば、、、