CSS:フォントサイズのvw指定を少し楽にする書き方

| コメント(0)
CSSで指定できるフォントサイズの単位のひとつに、vw、vh があります。
viewportに応じてサイズが変わるのでレスポンシブなサイトで便利なのですが、指定が少しわかりづらいと思っていました。

●1vw = 画面の横幅を 100% としたときの 1%分の幅

たとえば横 640px のデザインラフ上で 30px の文字は何vwになるのか、パッとはわかりません。
計算すると 4.68vw くらいなのですが、毎回計算するのも大変ということで
CSS上で直接計算するようにしてみました。

● font-size: calc(100vw / ( 640 / 30 )); /*30px*/

640  が「デザインラフの横幅」、30 が「デザインラフ上でのフォントサイズ」になります。

フォントサイズを変えるときもわかりやすいし、計算も不要で楽なのではないでしょうか。

コメントする

このブログ記事について

このページは、gravity-worksが2018年8月 1日 10:47に書いたブログ記事です。

ひとつ前のブログ記事は「Google chromeで画像を縮小表示したときにぼける問題の回避方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。