Responsive.jsとremを使って、どの端末で見てもデザイン通りの比率のサイトを構築する方法 [necotech blog]

Responsive.jsとremを使って、どの端末で見てもデザイン通りの比率のサイトを構築する方法

2017.2.21

CSS3の単位の一つ、remはすごく便利で、基準の大きさを決めてこれを使えば、全て相対的なサイズでサイトを構築できる。詳しい説明は以下から。

・remってなに？ – Qiita
・CSSの基本単位としてremを使うと超絶便利 – Qiita

これを使う最大の利点は、font-sizeを基準にするのに、font-size以外の値にも利用できる点である。widthとかheightとかmarginとかなんでも。
例えば、横幅640pxで作成されているデザインデータがあるとする。文字サイズ等をpxで固定にし、横幅によって改行位置や高さが変わるようにしてもいいが、テキスト量と高さまで計算されてデザインされている場合、やはり比率を保って表示するほうがスマートである。

ちなみにこの手法は、このサイトでも使っているので参考までに。

<html />要素に動的にfont-sizeを指定する

html要素にfont-sizeを指定することで、remが機能するようになる。この値(html要素のfont-size)をブラウザ幅に合わせて動的に変更し、CSS上のサイズ指定全てにremを使うことで、デザイン上の比率を保ったままの構築が可能になる。
また、今回の前提として、
・横幅640pxのSP版デザインデータがある。
・640pxの時、1rem=100pxとする。(320pxの時は1rem=50px、比例させる)
・PC版は固定幅のデザイン

ということで、動的にfont-sizeを変更するスクリプトがこちら。

responsive(0, 640, function(){
  $("html").css("font-size", $(window).width() / 6.4);
});

responsive(641, null, function(changed){
  if(!changed) return;
  $("html").removeAttr("style");
});

$(window).width() / 6.4というのは、実際にウインドウ幅を入れてみればわかると思うけど、上述した通り640pxの時、1rem=100pxとなる。PC版では邪魔なので指定自体を削除する。

・Responsive.jsのダウンロードはこちら

remで記述する

これだけのスクリプトで基盤は完成していて、あとはCSSのサイズ指定にpxを使わず、全てremで記述すればいい。
例えば、デザイン上24pxのテキストがあれば、font-size: 0.24rem;とする。繰り返しになるが、widthやheight, margin, padding, border-widthなど何にでも使えるので、あとは通常のコーディング時のpx指定をremにすればいいだけになる。

.example {
  width: 6rem;
  height: 4rem;
  margin: 0 auto 0.3rem;
  padding: 0.2rem;
  border: 0.01rem solid #CCCCCC;
}

.example p {
  font-size: 0.24rem;
  line-height: 0.36rem;
}

小技として、border-widthのみpxにした方が綺麗に見えることもある。(その場合はcalc()を使ってサイズを計算すると楽。)

デザインデータが640pxでない場合

上記の例では640pxと仮定しているが、たとえば750pxでデザインされていても、JS上の数値を変えるだけで対応できる。

responsive(0, 750, function(){
  $("html").css("font-size", $w.width() / 7.5);
});

デザインデータ以上の横幅でもSP版を表示したい場合

こちらも簡単で、全て倍率で相対的に指定しているので、ブレイクポイントを変更するだけで対応できる。

responsive(0, 999, function(){
  $("html").css("font-size", $w.width() / 7.5);
});

PC版でも同じルール、違う基準値でremを適用したい場合

こちらも、単に同じ手法を適用すればよい。

responsive(0, 999, function(){
  $("html").css("font-size", $(window).width() / 7.5);
});

responsive(1000, null, function(changed){
  $("html").css("font-size", $(window).width() / 12);
});

一度スクリプトを書いてしまえば、あとはいつものpxと同じような感覚で機械的にコーディングできるのですごく楽だよ。

Pocket

necotech

necotech blog