縦画面か横画面かでフォントサイズの計算を切り替えたい！
はじめに
そこのあなた！レスポンシブデザインに悩んでいませんか？
定石では画面の横方向のピクセル数によって切り替えます。
（例）@media (min-width: 20em) {
font-size: 1.25em;
}
しかし、今回作成しているアプリケーション（下記リポジトリ）では画面の縦横比によって切り替えました。
方法
body {
}
}
body {
font-size: 1.5em;
}
}
前半はモバイル端末向けのCSSです。
どのモバイル端末でも1行が23文字になるように計算しています。
もっとも、レイアウトもフォントサイズもem単位で記述したので、
大きな文字を使うところでは1行が10文字になったりします。
後半はPC向けのCSSです。
ブラウザの文字サイズ設定をもとに文字の大きさを決めています。
ウィンドウのサイズには影響されません。
まとめ
昨今のモバイル端末が4:3、16:9と縦に伸びているため、当面は有効手ではないでしょうか？
10年後にはARが普及して通用しなくなるかもしれませんが、それはそれで面白い世界です。
AR世代「えー、お父さんが若かったころ、あんなちっちゃい画面見てたの！？」
