【LESS】レスポンシブデザイン用フォントサイズ関数

レスポンシブデザインでスタイルを作るときにフォントサイズは rem で指定するのが定石ですが、古いブラウザでは対応していない場合があるので px でも指定します。

CSS

html {
  /* フォントサイズを 10px に設定 */
  font-size: 62.5%;
}
p {
  font-size: 14px;
  font-size: 1.4rem;
}

こうすれば rem 対応ブラウザであれば 1.4rem を、非対応ブラウザであれば 14px が適応されます。

ただこの方法ではフォントサイズを変更しようとした場合、２ヵ所書き変えなければいけません。それも、変え忘れや書き間違えがあった場合ブラウザ依存の気づきにくいバグとなります。

CSS

p {
  font-size: 13px;    /* 非対応ブラウザでは 13px */
  font-size: 1.2rem;  /* 対応ブラウザでは 12px */
}

CSS で書いていた場合は気を付ける他ないですが、 LESS で書いていれば関数化することで問題を解消することができます。

LESS

// pxとremでフォントサイズを設定する関数
.font-size(@px_val: 10) {
  @rem_val: @px_val / 10;
  font-size: ~"@{px_val}px";
  font-size: ~"@{rem_val}rem";
}

この関数を使うことで数値指定を１ヵ所にでき変え忘れなどのヒューマンエラーが減らせます。

LESS

.font-size(@px_val: 10) {
  @rem_val: @px_val / 10;
  font-size: ~"@{px_val}px";
  font-size: ~"@{rem_val}rem";
}

html {
  font-size: 62.5%;
}
p {
  .font-size(12);
}

出力結果:CSS

html {
  font-size: 62.5%;
}
p {
  font-size: 12px;
  font-size: 1.2rem;
}

注意点として、引数に設定する値に単位(px など)を指定せず、数値だけにしてください。