萌え時計をレスポンシブデザインで使う

萌え時計がレスポンシブデザインに対応しました。
能書きはどうでもいいと言う人は、下の詳細をクリック！

今までは萌え時計そのものの大きさを指定していました。％指定もできましたが、これは萌え時計の基本サイズである 512×512 ドットに対する％指定でした。

実は萌え時計制作時からレスポンシブデザインには対応したいと思ってはいたのですが、そうできない理由がありました（まぁ出来ないわけではなかったのですが）。その理由は「文字」です。
CSS + HTML では絵は簡単にレスポンシブデザインに対応できます。画像の大きさを要素に対する％で指定できるからです。要素の大きさが PC やタブレットによって変化しても、％で指定しておけば画像も要素の大きさに追随して変化します。
ところが文字はそういった指定ができませんでした。文字の％指定は元要素で指定されている文字サイズに対しての％であり、要素が大きくなろうが小さくなろうが文字の大きさは固定されていました（またスマフォでは勝手に文字を大きくして見やすくしてくれたりします）。

萌え時計は時計の表示に「文字」を使っていました。そのため、設置する時に大きさを決めることはできますが、萌え時計が表示されるときに自由な大きさに変化させると言うことができませんでした。

で、あきらめてたんですが……ふと「レスポンシブデザイン 文字サイズ」で検索すると、文字に対しても画面の大きさによって拡縮できる設定を見つけたのです。

• Viewport に関するサイズ設定

こいつを使うことによって文字サイズを動的に変化させることができるようになりました。
ただ、現在は vw を使って文字サイズを指定しています。本来は vmin を使いたいのですが、vmin は Microsoft Edge は対応してないというので今回は見送っています。そのうち vmin でやりたいなと思っています。