スマホサイトのサイズ指定はvwを使う

スマホサイトのサイズ指定はvwを使う

こんにちは。
cssで要素の幅や高さを指定するにはpx、%などいろいろありますが、今日は最近よく使うvwを紹介します。
これを使うことでデバイス毎の画面幅によるレイアウト崩れを防ぐことができます。

スマホサイトのコーディング

スマホサイトをコーディングするときiphone6だと良い感じになるのに、iphone5でみるとレイアウトが崩れる、なんてことありませんか?
スマホサイトの場合、画像は画面幅に合わせて拡大することが多いと思いますが、
font-sizeをpxで指定しているとデヴァイスフォントは画面幅に合わせて拡大されないので、改行位置が変わったりして、デザインを再現できなくなったりします。
そんなとき役に立つのが今回紹介するvwです。

vw

vw(Viewport width)はViewportに基づく単位でビューポートの幅の1/100を1vwとします。
iphone6等の画面幅375pxのときは375px=100vwなので1vwは3.75pxとなります。
これをfont-sizeやwidth,padding等に指定することで画面幅が変わっても、画像以外のコンテンツも画像同様に拡大されるのでレイアウト崩れを防ぐことができます。

scss

デザインカンプを元にpxからvwを計算するのは面倒ですが、scssで計算してしまえば手間が省けます。
※下の例だとiphone6で見たときfont-sizeが10px、iphone5だと10px以下になるので注意してください。

スマホサイトのサイズ指定は便利なvwを使いましょう!


Previous: EC-CUBE3を始めよう! – part1 – Next: YubinBangoで郵便番号から住所を補完する

© 2017 ALL CONNECT Inc. All Rights Reserved.