CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

[infobloga]

幅が狭くなったら、1行の文字数を減らしたいことの方が多いと思うので、あまり出番はないかも・・・・ / ただ、vwは知識として抑えておかないとダメだなと思った。

[otchy210]

vw 知らなかった。"font-size: calc(112.5% + 0.5vw)" これ、革命だな。IE8 以下をさっくり切れる時代になって、calc の活用始めたけど、vw ってのもかなり使える。素晴らしい。

[rexy]

もはやプログラミングの域だな

[inamiya115]

call

[microgravity]

“ width: 50vw; height: 50vh;”

[debumeshi]

“この小さすぎる、大きすぎる問題を解決するシンプルな方法があります。 文字のサイズに最小”

[nobodyplace]

“calc(18px + 0.25vw)”

[kazutan711]

やっとみつけた。これ試そう。

[nochiu74]

web

[nknkt]

これはすごい、あとでやる

[pinelike]

サイト作成で一列の文章を左寄せで組んで画面の両端に揃える際にスマホの大きさによってばら付きが出て非常に難しいと感じたけれどもCSSの「font-size:calc」での「vw」の設定によって相当に打開できそうで、凄い。

[drunkmotty]

]

[minasera]

メディアクエリ書かなくていいとかアツイ…

[HM_naoto]

先日コピペで実装しちゃったから、ちゃんと読んで理解します

[kakei]

font-size

[ririri3335]

めも

[taky1973]

caniuse で 'calc' 調べたら不安要素多そうなので、当面メディアクエリーでの切り替えでいくのが無難そう。

[jislotz]

去年これやったら古いAndroidのブラウザで表示が変って言われてJavaScriptでルートのフォントサイズをセットして子要素のフォントサイズは単位remで指定した。

[minimum_sho]

文字サイズの指定

[hedeyoshi]

こういう計算を考えるのは難しいけれどうまくいくと気持ちいいんだろうな。いい使い方だと思う。

[uretaro]

html { font-size: calc(112.5% + 0.5vw) } でまとめて指定。使えたらすごく楽になるね

[coco5959]

レスポンシブ対応の文字サイズを指定するこれからのテクニック | コリス: 本文や見出しなどの文字サイズをスマホ時やデスクトップ時で変える時、通常はMedia…

[travel1shop]

レスポンシブ対応の文字サイズを指定するこれからのテクニック

[designwao]

レスポンシブ対応の文字サイズを指定するこれからのテクニック | コリス: 本文や見出しなどの文字サイズをスマホ時やデスクトップ時で変える時、通常はMedia…

[Fushihara]

cssはどんどん単位が増えるなあ

[peketamin]

文字の拡大縮小はブラウザに任せたい…表現のためにあってもいいとは思うけど…

[s99e209]

Viewport Unit（ビューポートの単位）初めて知った。これうまく使いこなせればフォントサイズ指定に関してはわずかなコードで済みそうだ。

[shintarowfresh]

こんなの教えてくれないと気がつかないよ。すごいよ、便利だよ。

[japanitnt]

レスポンシブ対応の文字サイズを指定するこれからのテクニック | コリス: 本文や見出しなどの文字サイズをスマホ時やデスクトップ時で変える時、通常はMedia…

[tpex_ovon]

やばいむずかしいプログラミングか

[gamenou]

フォントサイズ

[sho_yamane]

vwってフォントサイズにも使えるのか