emとremの違いについて

Railsにて、拡大縮小機能をもつ表を作成している際に、一部文字サイズが変わらなかったときの備忘録です。

結論

em	親要素のサイズが基準となる
rem	最上位の親要素のサイズが基準となる

内容

RailsのViewファイルにて、<table>を使用して次の表を作成していました。

下記はそのコードの抜粋で、月の合計時間を最下行に表示します。

sample.html.erb

<style>
.total {
  font-size: 1.2rem; 
}
</style>

<table class="sample1">
    <tbody>
    <tr>#日にちと時間の表示
      <td>date</td>
      <td><%= @sample_time%></td>
    </tr>

    <tr class="total">#月の合計の表示
      <td>合計</td>
      <td><%= @month_total%></td>
    </tr>
    </tbody>
</table>

ここで問題となったのが、表の拡大縮小機能です。拡大すると当然文字も大きくなりますが、月の合計表示部分だけ文字サイズが変わりませんでした。

原因は、class="total"にて定義しているfont-size: 1.2remの「rem」部分。rem(root em)だと、一番上の親要素、つまりhtmlのfont-sizeを基準にしているようで、tableのfont-sizeが変わろうとhtmlのfont-sizeに変更はないためここでの拡大縮小には影響されなったようです。ここで、remではなく「em」の場合、一つ上の親要素、つまり<table class="sample1">のfont-sizeが基準となるようです。

以下のように、rem→emに変更することで、拡大縮小時に、tableのfont-sizeに追随して文字サイズが変更されるようになりました。

sample.html.erb

<style>
.total {
  font-size: 1.2em; 
}
</style>