デザインカンプ通りの比率でマルチデバイス対応する方法

デザインカンプ（幅640px）にボタン（幅468px）があるとします。
このボタンには上部にマージン（60px）があります。

このデザインカンプの比率を保ったまま、各種デバイスで表示させたいときの計算方法です。

640px以上では固定幅、640px 未満では比率を保ったまま縮尺させるには下記のようにします。

desktop-first.css

.button {
    width: 468px;
    margin-top: 60px
 }
@media only screen and (max-width: 639px) {
  .button {
    width: calc(468vw / 640 * 100);
    margin-top: calc(60vw / 640 * 100);
  }
}

割られる数の 468 のところはデザインカンプのボタンの画像幅、割る数の 640 のところはデザインカンプ全体の幅です。

CSS をモバイルファーストに書くのであればこうですね。

mobile-first.css

.button {
    width: calc(468vw / 640 * 100);
    margin-top: calc(60vw / 640 * 100);
 }
@media screen and (min-width:640px) {
  .button {
    width: 468px;
    margin-top: 60px
  }
}

この単位と計算方法は padding 、font-size、height、top などの指定にも使えます。