新しく立ち上げたサイト のフォントサイズを調整しようとしたんですが、スタイルシートに見慣れない単位「vw」がありました。

px、%、rem、em と、ただでさえ多いサイズ指定の単位。

そこへ新たに加わった vw が私を悩ませます。

しかも、calc 付きです。(計算式)

調べてみたら、vw に関連して vh、vmin、vmax までありました(笑)

昔は px だけの幸せな世界だったのに・・・。

vw 系列は、最近出てきたわけではなくて、私が知らなかっただけ。

レスポンシブデザインに対応させるのに便利で、vw だと Viewport の横幅に対応しており、100vw が 横幅100%となります。

なので、横幅 600px の画面に対して、50vw と指定してあげれば 300px に。

横幅 1000px の画面に対しては 500px になり、画面の幅に合わせて自動的に調整をしてくれます。

一応、理屈は分かったので、これから調整をがんばります。

フォントサイズで書きましたけど、それ以外のサイズ指定にも使えますよ。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です