ワイズリマインダー

block要素をレスポンシブに対応させる

320×50のblockを作成したい時

#test{
	position:relative;
	width:100%;
	height:100%;
	padding:15.625% 0 0;
}
#test > div{
	position:absolute;
	top:0%;
	left:0;
	width:100%;
	height:100%;
}
<div id="test"><div></div></div>

#testのpadding値は50/320=15.625%

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください