メモ

スマホサイト隆盛の現在において、レスポンシブデザインの知識はHTML5のコーダーにとって必須ですね。 レスポンシブデザインというと、まぁ、普通はメディアクエリで画面の横幅基準でブレイクポイントを作り、設定を切り替えるという方法をとるでしょう。 bootstrapもこれですね。 とある仕事で、もうちょっとアプリ的に対応したいという場合がありまして。 つまり、メディアクエリで対応するレスポンシブの場合、ブレイクポイント同士の間は同じCSS設定が反映されるため、全体の見た目が一定ではないのですね。 例えば、横幅320px～374pxで文字サイズを12pxに指定した場合、一行に入る文字数は320pxの場合と360pxの場合では異なります。 その分、行数が減る箇所もあれば、それによってやや余白が出ることもあるでしょう。 そうじゃ無くて、どんな画面サイズでも、（ほぼ）常に一定のレイアウトにしたい、というのがその時の要望。 例えば画像を横幅100%で表示するとすると、その画像はどんなサイズの端末で見ても横一杯に広がって見えます。 横幅に対する画像の中の（画像化された）文字の比率も一緒です。 こういうことを画像じゃなくてテキストでもやりたいと。 で、考えた方法は２種類あります。 （１）cssのvwという単位を使う （２）jQueryで横幅から基本のサイズを割り出し、全体をそれに対する比率で設定する ■（１）について 単位というとpxとか%とかemとかいろいろあります。 cssで数値を%で指定した場合、ボックスの幅なんかは、親要素に対する割合になります。 しかし、文字のサイズ（font-size）を%で設定した場合、親要素のfont-sizeに対する割合になるのですね。 例えば画面の横幅320pxに対して、1行に10文字入れたい場合、文字は32pxにすれば良いのですが、これをfont-size:10%とは書けないのですね。 そこで新しく登場したのがvwという単位。 上記の例で言うと、font-size:10vmと書くことができるのです。 vwは、画面の横幅に対する比率を設定することができる単位で、1vwは「画面の横幅に対する1%」です。 おお、すげー！便利！ と思ったんだけど、落とし穴が。 vwのブラウザ対応を調...