Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8647

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

$
0
0

デザインカンプ(幅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 などの指定にも使えます。


Viewing all articles
Browse latest Browse all 8647

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>