スマフォサイト作るときに、パーセント(%)指定が面倒な時なので、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だとあれなレイアウトになります。

Remをまとめておきます

概要

使い方