vw/vhって何？レスポンシブコーディングの再現率をより高品質に！【ジェット・コーディング】

コーディング部ログ

cssでfont-sizeなどを指定する際に利用される単位としては、

・ px
・ rem
・ em

などが有名ですが、

レスポンシブコーディングが求められるここ数年、

・ vw
・ vh

という単位も利用されるようになってきました。

コーディング代行会社として高いリピート依頼率を達成しているジェットコーディングでは、スマホ〜タブレッドサイズで「vw」をよく使います。

vw/vhは、ブラウザサイズの大きさに対する割合です。

ブラウザの横幅 = 100vw
ブラウザの高さ = 100vh

ブラウザの横幅が375pxの場合、
1vw = 375 x 1/100 = 3.75pxになります。

端末のサイズに比例して、自動的に収縮するため、横幅375pxの端末でも414pxの端末でもデザインデータの再現率が高まります。

ジェットコーディングがスマホサイズでvwを使う理由でもあります。

ただし、文章など読ませたいテキスト情報は、remやpxを使うこともあります。
このあたりは、デザインデータを見て何が最適化を判断しています。

vw/vhはコーディングのクオリティを上げる便利な単位ですが、デメリットもあります。
計算が面倒なことです。

デザインデータの横幅が375px, フォントサイズが15pxの場合、
15 / 375 x 100 = 4vw
といった計算をする必要があります。

これでは、作業効率が下がってしまいます。

ジェットコーディングでは、このデメリットを解消するためscssのmixinを利用してvwの値を自動で計算するようにしています。

scss？mixin？という方向けの記事も公開予定です！

POINT: 安心して任せられるコーディング代行会社をお探しでしたら、ジェットコーディングにご相談ください。
一度お電話いただければ、レベル感をご理解いただけるかと思います。