見出し画像
Photo by 歌川広重 / メトロポリタン美術館

#83 もうサイズ指定はメディアクエリいらなそう

em

clamp関数を使ってみる。
clamp関数は最小値と最大値とその間の変化する値を定義できる。

Sassのfunctionで、最小値のrem、最大値のrem、間の変化する値を計算

@function size_clamp($spSize, $pcSize) {
    $root-font-size: 16;
    $content-width: 1020;
    $clampSize: clamp(calc($spSize / $root-font-size * 1rem), calc($pcSize / $content-width *100vw), calc($pcSize / $root-font-size * 1rem));
    @return $clampSize;
}

最小値と最大値の計算はpxをremに自動変換する計算
最小値：calc($spSize / $root-font-size * 1rem)
最大値：calc($pcSize / $root-font-size * 1rem)
$root-font-sizeはいじりたくないので、ブラウザのデフォルトの16px。

よくhtml要素のフォントサイズを62.5%にする記述を見かけるけど、WordPressのECプラグイン「WooCommerce」などを入れるとレイアウト崩れの原因になるらしいのでいじらない。

中央値の計算は、calc($pcSize / $content-width *100vw)
$content-widthは、xdなりfigmaなりのデザインデータのコンテンツの横幅
コンテンツ幅に対する、対象サイズの割合をvwで指定している。

使い方はこんな感じで、1番目の引数にspサイズ、2番目にpcサイズを記載

h1 {
    font-size: size_clamp(24, 26);
}
h2 {
    font-size: size_clamp(22, 24);
}
h3 {
    font-size: size_clamp(20, 22);
}

デモ

参考


いいなと思ったら応援しよう！