CSS適応正方形問題について
707 ワード
モバイルエンドプロジェクトでは、適応に関する問題がよく発生します.次に、適応に関する方法を見てみましょう.
シナリオ1:ボックスモデルで垂直方向のpaddingを設定し、margin、paddingのパーセンテージ値は親要素の幅に対して計算されるので、padding値をwidth値と同じパーセンテージに設定すればよい.
.box{
}シナリオ2:vwを使用して【ブラウザの互換性が悪い】CSS 3に、可視領域のパーセントに対する長さ単位vw,vh,vmin,vmaxのセットが追加された.1vw = 1% viewport width; 1vh = 1% viewport height
.box{
}シナリオ3:擬似要素のmarginを設定する
.box{
}.box:before{
シナリオ1:ボックスモデルで垂直方向のpaddingを設定し、margin、paddingのパーセンテージ値は親要素の幅に対して計算されるので、padding値をwidth値と同じパーセンテージに設定すればよい.
.box{
width:50%;
height:0;
padding-bottom:50%;
background-color:lightblue;}シナリオ2:vwを使用して【ブラウザの互換性が悪い】CSS 3に、可視領域のパーセントに対する長さ単位vw,vh,vmin,vmaxのセットが追加された.1vw = 1% viewport width; 1vh = 1% viewport height
.box{
width:50%;
height:50vw;
background-color:lightblue;}シナリオ3:擬似要素のmarginを設定する
.box{
width:50%;
background-color:lightblue;
overflow:hidden;}.box:before{
content:'';
display:block;
margin-top:100%;
}