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

UnsplashのTaras Shypkaが撮影した写真
当サイトはアフィリエイト広告を利用していますレスポンシブ対応を、%だけじゃなくて、vwを使えるようになると、
劇的にレスポンシブ対応にかける時間コストが下がるよ~
って話。
詳しい使い方は、デイトラコミュニティメンバー限定ですが↓↓
【メンター勉強会】【レスポンシブで崩れるを解決!】CSSの便利な単位と関数をマスターして、保守性・レスポンシブに強いコーディングを学ぼう!
で学びました。
デイトラコミュニティ会員で、レスポンシブ苦手!!
って方は、はやい段階で見ておくのおすすめ。
唯一注意点として、
僕もけっこうやった失敗として、
子要素にvwでwidth指定してて、その親要素に、min-widthを指定した場合、
ウインドウ幅が大きくなると、子要素が親要素を突き破ってはみ出す、、、
ってのがあるので、親にmin-widthあてるときは注意!!です。
そういう場合は、あえて%とcalc()使って計算してやるとキレイに収まります。