しゅう【Webサイト制作/改良
・コーダー】
のPortfolio Site

vw、calc()、min()、max()、clamp()などなどなど

UnsplashTaras Shypkaが撮影した写真
当サイトはアフィリエイト広告を利用しています

レスポンシブ対応を、%だけじゃなくて、vwを使えるようになると、

劇的にレスポンシブ対応にかける時間コストが下がるよ~

って話。

詳しい使い方は、デイトラコミュニティメンバー限定ですが↓↓

【メンター勉強会】【レスポンシブで崩れるを解決!】CSSの便利な単位と関数をマスターして、保守性・レスポンシブに強いコーディングを学ぼう!

で学びました。

デイトラコミュニティ会員で、レスポンシブ苦手!!

って方は、はやい段階で見ておくのおすすめ。

唯一注意点として、

僕もけっこうやった失敗として、

子要素にvwでwidth指定してて、その親要素に、min-widthを指定した場合、

ウインドウ幅が大きくなると、子要素が親要素を突き破ってはみ出す、、、

ってのがあるので、親にmin-widthあてるときは注意!!です。

そういう場合は、あえて%とcalc()使って計算してやるとキレイに収まります。