デザインカンプ(幅640px)にボタン(幅468px)があるとします。
このボタンには上部にマージン(60px)があります。
このデザインカンプの比率を保ったまま、各種デバイスで表示させたいときの計算方法です。
640px以上では固定幅、640px 未満では比率を保ったまま縮尺させるには下記のようにします。
desktop-first.css
.button{width:468px;margin-top:60px}@mediaonlyscreenand(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);}@mediascreenand(min-width:640px){.button{width:468px;margin-top:60px}}
この単位と計算方法は padding 、font-size、height、top などの指定にも使えます。