スマフォサイト作るときに、パーセント(%)指定が面倒な時なので、Remを使う方法をまとめる。
#概要
Remとは、htmlたぐに定義した「フォントサイズ」を1remとするプロパティ値。
sample.html
<html style='font-size:100px'>
の場合、1rem =100pxになる。
sample.html
<div style='width:1rem'></div>
は
sample.html
<div style='width:100px'></div>
と同じ意味。
何がうれしいかというと、入れ子になったノードの中でも、必ず絶対値**を返す
sample.html
<div id='parent'>
<div id='child'></div>
</div>
child内でのパーセンテージは、parentに対する相対値になる、emも同様。
remはhtmlタグに対しての絶対値なので、parentとchildで同じ値を設定できる。
#使い方
1.画面幅を6.4rem決めうちしてレイアウトを作る。
remは「width」意外にも、padding margin 何でも使える
2.JavaScriptで画面ロード時にremを仕込む
sample.js
window.addEventListener('load',function()
{
var rem = window.screen.width/640*100;
document.getElementById('html').style.fontSize = rem +'px';
});
3.これで、画面幅に応じていい感じに、拡大縮小するようになる。
最初に画面がちらつくのがいやなので、bodyタグを最初display:none
にしておいて、onload時で表示するとちらつかなくなります。
注)onloadで変えてるので、途中で画面幅変えても追従しません
注)PCだとあれなレイアウトになります。