Responsive.jsとremを使って、どの端末で見てもデザイン通りの比率のサイトを構築する方法
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版では邪魔なので指定自体を削除する。
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と同じような感覚で機械的にコーディングできるのですごく楽だよ。
