【正社員】WEBデザイナー
受付事務スタッフのアルバイト
/パート募集
/パート募集
lamp()関数は、フォントサイズに最小値、推奨値(動的な値)、最大値を設定できるため、最も柔軟で強力な方法です。これにより、画面サイズに応じてスムーズにサイズが変化しつつ、極端に小さくなったり大きくなったりするのを防げます。
・16px: 最小フォントサイズ。これより小さくなることはありません。
・3vw: 推奨フォントサイズ。ビューポート(表示領域)の幅の3%として計算されます。画面幅に応じて動的に変化します。
・30px: 最大フォントサイズ。これより大きくなることはありません。
#test {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
column-gap: 4%;
row-gap: 0;
}
#test > div {
border: 1px solid #000;
padding: 4em 0em;
text-align: center;
font-weight: bold;
/* 最小フォントサイズ: 16px */
/* 推奨フォントサイズ: ビューポート幅の 3% (3vw) */
/* 最大フォントサイズ: 48px */
font-size: 30px;
font-size: clamp(15px, 2.8vw, 30px);
}