わからないこと
ベースのwidth:750px
レスポンシブサイトでabsoluteのtopでCSSを指定した際にディベロッパーモードで確認した時とブラウザのウィンドゥを縮めて確認した時に微妙にズレが発生する
ざっくりと下記のような組み方をしています。
vwの計算方法は実際には下記の計算をしています。
デザイン上の長さ/750*100
html
1<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0"> 2 3<div class="container"> 4<p class="bg_a">AAAAA</p> 5<p class="bg_b">BBBBB</p> 6<p class="bg_c">CCCCC</p> 7<p class="ab">購入する</p> 8</div>
css
1.container{ 2 width: 100%; 3 position: relative; 4} 5.bg_a{ 6 padding:3vw 0; 7 background: #000000; 8} 9.bg_b{ 10 padding:10vw 0; 11 background: pink; 12} 13.bg_c{ 14 padding:10vw 0; 15 background: green; 16} 17.ab{ 18 position: absolute; 19 top:10vw; 20 background: blue; 21 width: 100%; 22 color:#ffffff; 23 padding:2vw 0; 24}
topの計算方法はvwのみで指定しています。
ディベロッパーモードで確認した時
ブラウザのウィンドゥを縮めて確認したとき
おそらくスクロールバー分がずれているのではないかという推測なのですがこれをずれないようにするにはvwだけではできないのでしょうか?
もしご存知の方がいらっしゃれば教えていただければ嬉しいです。
回答2件
あなたの回答
tips
プレビュー