大きさが可変する文字のコーディング

Question

https://sukawa-hoikuen.com/
こちらのサイトの､画面を可変させたときの文字の大きさの推移のさせ方が分かりません｡
vw,vhを使ってみたものの､アンバランスになってしまい､再現ができません｡
どなたか､ご教授をお願いできませんでしょうか｡

mediaqueryを使って､細かく指定していく方法を取ろうとも思ったのですが､毎回そのようにやることは
効率が悪く思えましたm(__)m

Comments

[miyabi_pudding]

現状のソースコードを記載して下さい。

[takumi_ihp]

社内で開発している途中で伺ったので､ソースの準備をしておりませんでした｡
次回､質問内容を気を付けます｡

Answer 1

mediaqueryを使って､細かく指定していく方法を取ろうとも思ったのですが､毎回そのようにやることは

効率が悪く思えましたm(__)m

そのサイトではそのようにしていますね。

html { font-size: 3.125vw; }

@media (max-width: 1000px) { html { font-size: 195.3125%; } }

@media (max-width: 414px) { html { font-size: 13.333vw; } }

各要素のサイズは rem 単位で指定しているようです。
よく見るやり方だと思います。

Comments

[takumi_ihp]

ありがとうございます｡
ルートにフォントの指定｡メディアクエリで画面幅によって可変させる感じなんですね｡
それで各要素をremで指定､､､なるほどです｡勉強になりました｡
今後作成するサイトで取り入れます｡

とはいえ､こんなに微妙な数値を採用するものなんですね｡
それほどデザインにこだわっているってことなんでしょうか｡

[Lhankor_Mhy]

おそらく、ターゲットにしたデバイスで一番よく見えるようにしてるんだと思います。

ちなみに、16px * 195.3125% は、31.25pxで、これは 1000/32 なんですよね。
おそらく、1000pxのスクリーンに32文字を詰める、という指定なんだと思います。

Answer 2

こちらのサイトの､画面を可変させたときの文字の大きさの推移のさせ方が分かりません｡

「当該サイトをDeveloper Toolsで調べる」のが先決かと思いますが、それは行いましたでしょうか？

Comments

[takumi_ihp]

もちろん行いました｡それでも分かりませんでした｡font-size指定が％表記だからかな｡思いましたが､文字サイズが画像と比例して変化するので､とても不思議に思いました｡

[maisumakun]

> font-size指定が％表記だからかな

パーセント表記は、親要素のフォントサイズに対する指定です。親要素のフォントサイズ指定を確認してみましょう。

> 文字サイズが画像と比例して変化するので

画像も同様にウィンドウサイズに合わせて伸縮するような効果をかけていれば、どちらも同じ割合で変動します。必ずしも「文字サイズを画像サイズに直接合わせる」セッティングをする必要はありません。

[takumi_ihp]

なるほど。回答ありがとうございます！