ウィンドウ幅に文字サイズを連動させて変えるCSSの書き方。

こんにちは、minoruです。

Webに公開しているHTMLファイルは、当然ですがPCやスマホなど、色んな異なる画面幅で読まれるわけですが、画像を背景にして、その上に文字を重ねている場合など、画面幅に合わせて画像は縮小表示されても、文字はそのまんまでバランスがおかしくなります。

ウィンドウ幅に文字サイズを連動させて変えるCSSの書き方を探したらありました。

ちなみに「css 横幅 文字サイズ 自動」でGoogle検索して発見。

参考:いつか使うかも?cssのfont-sizeをビューポート-パーセンテージで指定する

上記サイトのサンプルページ

vw相対指定。ビューポートの幅の何パーセントか。

vh相対指定。ビューポートの高さの何パーセントか。

vmin相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。

vmax相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。

私のやりたかった事は、

font-size:3vm;

こう書けば解決しました。

ただ、これだと画面幅の何パーセントか?なので、もし極端に横長なディスプレイとかが今後流行してしまった場合、ちょいと面倒な手直しが必要かも知れませんね?

まあ詳しい事は必要になった時にじっくり覚えるとして、とりあえず解決できそうなWebページを見つけたので載せておきます。

参考:レスポンシブルにフォントサイズを変更し、最小サイズ・最大サイズを指定する方法

要するにCSSの@mediaって奴を使って、最小・最大を指定しておく方法。

最終的なソース部分を以下に引用。

/* 最小フォントサイズ : 16px */
html {
  font-size: 16px;
}

/* 
 * レスポンシブフォントサイズ
 * ウィンドウ幅 860px から 1280px まで、
 * フォントサイズが 16px から 24px に流動的に変化する
 */
@media (min-width: 860px) {
  html {
    font-size: calc(1rem + ((1vw - 8.6px) * 1.9048));
  }
}

/* 最大フォントサイズ : 幅 1280px 以上は 24px */
@media (min-width: 1280px) {
  html {
    font-size: 24px;
  }
}

ツイッターはじめました!まだまだフォロワーさんが少なくてさみしいので、ぜひフォローお願いしまーす!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする