フォントサイズはpx以外にも、emやrem、%など色々な指定方法がありますが、calcで指定すると画面幅に応じて、動的に変化させることができます。
指定方法は以下の通り。計算しないといけないので少し面倒ですが。
font-size = calc(最小のフォントサイズ + ((1vw – XX) * YY))
XX : ViewPort の最小幅 / 100 (単位 : px)
YY : 100 * フォントサイズの差 / ViewPort 幅の差 (単位 : なし)
実際に画面幅800px〜1200pxでフォントサイズが14px〜20pxに変化するようにしてみます。
フォントサイズが14px〜20pxまで変化します。
HTML
<span class=”font-size-calc”>フォントサイズが14px〜20pxまで変化します。</span>
<span class=”font-size-calc”>フォントサイズが14px〜20pxまで変化します。</span>
CSS
.font-size-calc {
font-size: 14px;
}
@media screen and (min-width: 800px) {
.font-size-calc {
font-size: calc(14px + ((1vw – 8px) * 1.5));
}
}
@media screen and (min-width: 1200px) {
.font-size-calc {
font-size: 20px;
}
}
.font-size-calc {
font-size: 14px;
}
@media screen and (min-width: 800px) {
.font-size-calc {
font-size: calc(14px + ((1vw – 8px) * 1.5));
}
}
@media screen and (min-width: 1200px) {
.font-size-calc {
font-size: 20px;
}
}
最小のフォントサイズに14pxを、最大のフォントサイズに20pxを指定しており、画面幅800px〜1200pxではフォントサイズの最小から最大までの間で流動的に変化します。
Leave a Comment