font-size には rem を使うべきかどうかについての見解
先週、以下のfont-sizeに関する見解が話題になっていました。
font-size には rem を使うべきかどうかについての見解
私も概ね同意の内容でしたが、最後のほうに書かれている「rem への変換方法」については同意できませんでした。
というのも、以下のようにcalcを使って記述するという、わかりづらく面倒な方法だったからです。
大半の人はなぜこれで --to-rem が 0.0625rem になるのかすぐに理解できません。
CSS
@property --root-font-size {
syntax: "<length>";
inherits: false;
initial-value: 16px;
}
:root {
--to-rem: calc(tan(atan2(1px, var(--root-font-size))) * 1rem);
}
.heading {
font-size: calc(24 * var(--to-rem));
}また、font-sizeを calc(24 * var(--to-rem)); のように書くとEmmetが使えなくなるというデメリットも発生します。
pxからremの変換はpostcss-pxtoremを使うべき
pxからremの変換はpostcss-pxtoremを使って自動変換すべきです。
Vite環境の場合、まず以下のコマンドで「postcss-pxtorem」をインストールします。
npm i -D postcss-pxtorem※ postcssがインストールされていない環境の場合は、postcssもインストールしてください。
次にプロジェクトのルートディレクトリにpostcss.config.jsを追加して、postcss-pxtoremを有効にするコードを追記します。
postcss.config.js
export default {
plugins: {
'postcss-pxtorem': {},
},
}あとは「npm run dev」で起動するだけでpxがremに自動変換されます。
postcss-pxtoremのデフォルト設定ではrootは16px (1rem) になっています。
そのため、CSSファイルや<style>内に以下のコードを書いた場合、32pxは2rem、24pxは1.5remに自動変換されます。
CSS
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
