insdays

vw・vh がポイント!

min-width と min-height が効かない時の対処法

  • 2019.02.20
  • CSS
min-width と min-height が効かない時は下記でOKか!?
#hoge {
	min-height: 10vh;
	height: 100%;
}
#hoge {
	min-width: 10vw;
	height: 100%;
}
ポイントは「vh・vw」のとこ「viewport height / width」の略。
「%」の使い方に近いけど「vh・vw」は「デバイス画面」を基準に数値が反映される。
「max-width・max-height」もこれで効くのだろう、きっと。

ブロック要素にする

あまり関係ないかもだけどブロック要素として認識されてない時は下記
#hoge {
	display: inline-block;
}

Copyright 2018 insdays