レスポンシブ対応する上で知っておくべき知識

文字や画像などの大きさを変える場合、ブレイクポイントを用いてレスポンシブ対応させると思います。

positionを多用するようなレイアウトをコーディングする際、サイズ(px)を決め打ちするようなコーディングでは骨の折れる作業です。
特に昨今のスマホはサイズが多岐にわたり、ユーザーも分散してしまっている現状で、全てのサイズを網羅するというのは現実的ではないです。

ですので今回は、positionが絡んだレイアウトでも工数をかけず、全てのデバイスサイズに対応できる技をご紹介します。
ですが、このやり方は万能というわけではなく、多用するとメンテナンス性が低下します。
使いどころを見極めて局所的に使っていくことをお勧めします。

画面幅に合わせてアスペクト比を維持させたままサイズを可変させる

例えば上のGIF画像のようなpositionを用いたレイアウトを例に実際解説していきます。

要は画面幅を縮めてもレイアウト自体の配置を維持しつつ、縮尺のみを変更するといったことをしていきます。




""" width: calc(対象要素の幅 / ウィンドウ幅  * 100vw); """


例として、対象要素の幅を350px、ウィンドウサイズを768pxとし、式に落とし込むとこのようになります。

width: calc(350 / 768 * 100vw);

こうすることにより、768px以下のウィンドウ幅が変動してもアスペクト比を保ったままにできます。

要するに元となる値を上記の式に当て込むだけです。


このようにpositionで位置をとっていたら
top: 100px;
left: 200px;

こう置き換えるだけ。
top: calc(100 / 768 * 100vw);
left: calc(200 / 768 * 100vw);

あとは位置を微調整していけば、デバイスサイズを考慮しなくてもレイアウトを崩すことのないレスポンシブ設計ができるようになります。

あまり使用頻度は高くないですが、たまにこのようなレイアウトに出会うので覚えておいて損はないかと。