レスポンシブサイトでカンプを再現!横幅が拡縮してもデザインの見た目を維持するSassのコード

デザイナーさんがカンプを作られる際、デバイスのサイズっておそらくPCとスマホの二種類しか用意していないことが多いと思います。(気の利いたところだとタブレット用のカンプも作ってくれるかもしれませんが)

PC版のカンプしかなくて、スマホのデザインは「よしなに・・・」なんて言われることも割とよくありますが(泣)、それはさておき・・・

例えばスマホ用のデザインカンプが横幅750pxで作られている場合、ちょうど2で割って325pxの画面ならデザインはきっちり再現できるけど、モバイルデバイスの画面は320pxの場合もあれば375pxの場合もあったりと多様ですよね。
そんなとき、デザインの見た目を維持するようサイズ指定を入れておけば、もう「iPhoneXだと綺麗に画面に収まるけどiPhoneSEの大きさだと崩れるからその分余計なメディアクエリを足さなきゃいけない」という心配もご無用です!

ポイントは、サイズの単位としてvwを使うこと。
画面サイズの横幅100%の幅が100vwなので、それを基準として使えばmarginもpaddingも全て横幅100%に対しての割合の数値を入れれば良いわけです。

毎回横幅100%からの割合を算出するのは面倒なので、ここはSassを使ってサクッといきましょう。

まず、スマホのデザインカンプの横幅を変数に入れます。

$sp-base-num: 750;

デザインカンプ上で長さを計って(縦でも横でもOK)、例えば横幅が160pxであれば

width: #{160 / $sp-base-num * 100}vw;

上部の余白が30pxであれば

padding-top: #{30 / $sp-base-num * 100}vw;

全部これでOK!

カンプ上の数値をそのまま入れるので、「ええっと、retinaディスプレイだから1/2にして・・・」なんて面倒な計算も要りません( ˘ω˘ )

PCサイズの画面の時は、メディアクエリで切り替えて数値をpxやremベースに設定し直してくださいね。

※スマホサイトの場合、Androidだとfont-sizeが8pxより小さくなると、どんなに小さい数字を指定しても8pxより小さく表示されないのでご注意を。PCのブラウザでも表示される最小のサイズは10pxです。(これはデザイナーさんもしっかり覚えておいてもらえると嬉しいです泣泣泣)