Viewport ってむつかしい

要素の幅とか、画像のサイズとか、基本的には px で指定しています。楽だし、慣れてるし。でもレスポンシブ対応するときには、そのままで使うとずれてしまう原因になります。

細かくブレイクポイントを指定してもいいんですが、あんまりスマートじゃないですよね。個人的には @media を大量生産して、どんな画面で見てもビシッと決まるようにこだわってコード盛り盛り書くのは嫌いじゃないんですが、少ないコードでしっかり対応させた方がすっきりするし、ファイルサイズも小さくなるし、かっこいい気がします。

なので、vw とか vh とか、Viewport を使うやり方を覚えようと思い、試しに使ってみてるんですが、むつかしい。使い方、というよりは、どういった場面で使うべきなのかがわからない。

例えば横長のロゴや、画像を vw で指定すると、それなりにいい具合にサイズ調整してくれるんですが、ある程度のところまで行くと対応しきれないのか、改行してしまったりはみでてしまったりして、そこでブレイクポイントを作ることになって、結局 px で指定してるときとやってることがあんまり変わらない印象。あれかな、@media と @media の間で、より細かく柔軟にフレキシブルにサイズを動かしたいときに使えばいいのかな。でもそんな、px にプラスアルファした程度の能力じゃないはずだ!と思うんですが、より効果的な使い方が思いつかない。

とはいえ vw や vh は、時々うまいことハマって、 レスポンシブにばっちし対応してくれることがあって、なんとなく仲良くやっていけそうな雰囲気あるんですが、vmax と xmin に関しては、とっつきにくいっていうレベルじゃない。うまく使いこなせたらかっこいいし頭良いと思うんですが、現状かっこよくも頭良くもなれる気配がない。

というわけで、ネットの海をさまよって、適切でクールでスマートな使い方をしているかしこい人を探したいと思います、以上。調べたらまたまとめたいと思います。終わり。ここ最近忙しくなってしまっていろいろ滞っているけど、なんとかブログを更新したくてひねり出した中身のない記事、終了。

かしこ

タイトルとURLをコピーしました