(93) 画面幅に合わせてフォントサイズ切り替え

投稿者: | 2021年1月1日

1. やりたいこと

iPad Proなど、最近のタブレット端末はとっても解像度が高い。

このような端末の場合…
パソコン画面に表示するつもりで作った WEBページをタブレットで表示すると
文字が小さすぎて見づらいことがある。

また、スマホの場合は画面サイズがいろいろで、
端末によって見え方を統一したい場合に文字の大きさが問題になる。

よって…
画面幅に対して文字サイズを一定にしたい
場合がある。

2. 基本

文字サイズを vw で指定すればよい。

因みに vwとは?
remのように文字サイズや余白、マージンなどで使用できるサイズの単位である。

画面幅いっぱいが 100vw
画面幅の1/100の大きさが 1vw である。

1) 例:画面幅の 1/10の文字サイズで描画する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00093 demo1</title>
<style>
p{
  font-size: 10vw;   /* 画面幅の10/100 */
}
</style>
</head>
<body>
<p>
あいうえお
</p>
</body>
</html>


https://www.dogrow.net/hp/sample/00093/demo1.html

間違えないように!
親ブロック要素の幅が基準ではない!
ウィンドウ幅が基準だ!


https://www.dogrow.net/hp/sample/00093/demo2.html

3. 応用

後日追記

4. 所感

・vwをサポートしていないブラウザで閲覧される可能性が高い WEBページの場合、vwの使用を控えなければならない。

x. 謝辞

有用な情報をありがとうございます。m(_ _)m
https://qiita.com/katsunory/items/3bede89cee8e2ded8426


コメントを残す

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


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)