ワイズリマインダー

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

2016.03.01

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%

css レスポンシブ

コメントを残すコメントをキャンセル

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

検索

最近のコメント

【Windows編】2022年11月に終了するSlingBoxを延命させてみたに T.K より2025年5月31日
なぜか質問を投稿すると反映されない。。何かしら問題があってはじかれている？？
【続編】Gmail内の不要なメールを定期的に自動削除するようにしてみたに ysrock より2025年5月15日
コメントありがとうございます。 8行目のコードを次のように書き換えることで下層ラ…
【続編】Gmail内の不要なメールを定期的に自動削除するようにしてみたに GAS初心者より2025年5月15日
参考になる記事をありがとうございます。こちらのラベルの「nth日後に自動削除」…
【Windows編】2022年11月に終了するSlingBoxを延命させてみたに T.K より2025年5月9日
登録出来たので単に登録出来てなかっただけの模様。。改めて登録します。
【Windows編】2022年11月に終了するSlingBoxを延命させてみたに T.K より2025年5月9日
登録出来ない？？

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク