レスポンシブ対応２

レスポンシブ対応を進める中で、位置の指定だけでなくフォントサイズの指定など、画面サイズが様々な場合のやり方として「vw」「vh」が重要になります。

絶対値の指定では画面サイズが変わると、大きさに合わせた適切な表示できません。
そこで相対的に指定する必要があります。
同じような指定の方法で「％」での指定があります。しかし、これは親要素に対しての比率での指定になるため、画面やウィンドウサイズにより表示がおかしくなります。

そこで「vw」「vh」が出てきます。
「v」はViewPortのことで、ウィンドウサイズに対して指定ができます。
「w」はwidth（幅）、「h」はheight（高さ）のことで幅や高さを基準に指定をします。
いま、レスポンシブ化を頑張ってやっていますが、「vw」での指定が多いですね。

例えば、レスポンシブで750pxの横幅以下を措定した場合、

・表示したい画像のwidthをウィンドウサイズが750pxの時のサイズを出す（ABCpx）
・幅基準なので、「vw」を計算する
　　XYZ=ABC/750*100
・画像のサイズ指定　⇒　width: XYZvm;

便利なのは、フォントサイズも全く同じように計算し、vwで指定すればOKです。
（いろいろ調べて、なかなか分かりやすい計算がのっているサイトが少なかったです）

最初は幅の指定は「vw」、高さの指定は「vh」と勘違いしていました…(笑)
幅でも高さでもフォントサイズでも、基本は幅を基準に考えればいいので「vw」で大丈夫な気がしました(笑)
これからもいろいろ勉強して吸収していきます！