【レスポンシブ】スマホのデバイス幅によるレイアウト崩れなどを一切無視できるテクニック

ウェブ技術関連

2018.1.21 この記事は書いてから半年以上経過しました。

最近の案件では、スマホデザインは横幅750pxで制作することが多いと思います。
しかし、iPhone5などに代表される320pxデバイスもまだまだ健在です。

「横幅375px想定でコーディングしたら320pxのデバイスでカラム落ちした！」
「横幅広いデバイスでみたら左右の隙間が広すぎ！」

多くのフロントエンドエンジニアの方は上記に近い経験があるのではないでしょうか？
これをなんとかしようという話です。

vwを使ってなんとかしてみる

そこで台頭してきたのがvw（Viewport Width）という単位です。
これは、横幅を320pxとした時に、100vw=320pxになるというものです。
%と違って親要素の制約を一切受けません。

横幅７５０pxで、14px想定（デザイン上28px）のフォントサイズでデザインされていた場合は、

SASS


// 100/750*14=1.86666666666・・・
p { font-size:1.86666666666vw;}

となります。冗長ですね。見た目的にもイマイチですね。
当然ですが、このような計算はやってられません。
なのでsassを利用してmixinにあらゆるパターンをまとめあげます。

SASS


// pxをvwに変換(px互換もつける)
// デザインの横幅 = $viewport
// @include vw-width(28);
$viewport:750;
@function get_width_px($viewport, $width){
	@if $viewport == $width {
		@return 100%;
	} @else {
		@return $width * 0.5px;
	}
}
@function get_width_vw($viewport, $width){
	$rate: 100 / $viewport;
	@return $rate * $width * 1vw;
}
@mixin vw-width($width:9999998){
	width: get_width_px($viewport, $width);
	width: get_width_vw($viewport, $width);
}

とかなんとかを、ある程度全てのCSSで作っておくと、まあまあ便利に使えます。
ただ、かなり冗長です！正直めんどくさいです。

calcとremを組み合わせる

そこで、究極の解として、remをあらゆる単位の基準として使用するという方法があります。
当社では以下のようにしています。

SASS


@media screen and (max-width:750px){
	// ０．７５ = デザインの横幅px/1000
	html { font-size:calc(100vw / 0.75);}

	// [例1] フォントサイズが14px（デザイン上28px）の場合
	p { width:0.028rem;}

	// [例2] 横幅が100px（デザイン上200px）の場合
	div { width:0.200rem;}

	// [例3] マージンが10px 0 20px（デザイン上20px 0 40px）の場合
	div { width:0.020rem 0 0.040rem;}
}

こうすることで、直感的にも何pxでデザインされているのかなどが一目瞭然になります。
そして、あらゆる横幅の全てのスマホで見た目が相対的に拡大縮小するだけになるので、レイアウトが完全に一致します。
[例2]と[例3]の数値が間違ってましたので修正しました！

calcが使えない場合

IE9未満、Android4.4未満、iOS６未満、Chrome19未満、Firefox4未満、Safari6.0未満
はcalcに対応していません。そんな時はjQueryで代用します。


$(window).on('load resize', function(){
	var windowW = window.innerWidth;
	if(windowW > 750){
		fzPC();
	} else {
		fzSP();
	}
}).resize();
function fzSP(){
	windowW = window.innerWidth;
	var fz = windowW/0.75 + 'px';
	$('html').css({'font-size':fz});
}
function fzPC(){
	$('html').css({fontSize:'62.5%'});
}

などとします。
※pcのフォントサイズは適宜変更してください。