vw単位でのレイアウト

vwは親要素のサイズなどに関係なく、常にビューポート幅(ブラウザ幅)を基準として割合を算出すれば良いので、ブラウザ幅いっぱいに広がるデザインをそのまま再現するのは非常に簡単。アートボード幅が1600pxの場合、対象サイズ÷1600×100vwと計算するだけで全体に拡大縮小するレイアウトを実装できる。

.mainVisual__body {  /* アートボード幅が1600pxの場合 */
 width: 62.5%;
 margin-top: -20.625vw;  /* -330px */
 padding: 5vw 5vw 5vw 16.25vw;  /* 80px 80px 80px 260px */
}
inserted by FC2 system