CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。

。箱{
		幅: 200ピクセル;
		高さ: 200px;
		背景: ピンク;
		色: #666;
	}

しかし、多くの場合、モバイルデザインでは、画像の幅はモバイルデバイスによって変わります。このとき、適応型スクエアが必要になります。

比較的単純な実装方法を 2 つ紹介します。

方法 1: CSS3 vw 単位、vw はビューポートの幅に相対的です。ビューポートは 100 単位の vw 単位に分割されます。 1vw = 1% ビューポート幅

。箱{
		width: 20%; //width:20vw でも OK height: 20vw;
		背景: ピンク;
	}

方法 2:ボックスの padding-bottom スタイルを、ボックスの padding-bottom がボックスの幅と同じになるように設定し、height = 0px に設定します。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<meta http-equiv="X-UA-compatible" content="IE=edge">
		<タイトル></タイトル>
		<link rel="スタイルシート" href="">
	</head>
	<スタイル>
                *{
            	    マージン: 0;
	            パディング: 0;
                }
		。箱{
			幅: 20%;
			/* コンテンツによってボックスの高さが過度に伸びるのを防ぐため、高さを 0 に設定します */
			高さ: 0px;
			/* ボックスの高さを拡大します。
			   幅と同じ固定幅またはパーセンテージを設定します。
			   パーセンテージは親要素ボックスの幅に対する相対値です*/
			パディング下部: 20%;
			背景: ピンク;
			色: #666;
		}
	</スタイル>
	<本文>
		<div class="box">	
	            <p>これは自己適応型正方形です</p>
		</div>	
	</本文>
</html>

ここでheight: 0pxと書かれていない場合、ボックス内にコンテンツがある場合、ボックスはコンテンツによって拡張されることに注意してください。

padding-bottom を padding-top に変更すると何が起こりますか?

四角の中にコンテンツがある場合、そのコンテンツは四角の外側に表示されることがわかります。これは、デフォルトのテキストが左から右、上から下に配置されているため、padding-top の後にはテキストが四角の外側に表示されてしまうためです。そのため、ここでの padding-bottom と padding-top は混在できません。

また、ボックスは height : 0px; に設定されているため、要素内に子要素がある場合、高さを正常に設定できません。したがってposition: absolute;使當前內容脫離文檔流,那么內容的高度百分比參照的就是父級的寬度

*{
	マージン: 0;
	パディング: 0;
}
。箱{
	幅: 20%;
	/* コンテンツによってボックスの高さが過度に伸びるのを防ぐため、高さを 0 に設定します */
	高さ: 0px;
	/* ボックスの高さを拡大します。
	   幅と同じ固定幅またはパーセンテージを設定します。
	   パーセンテージは親要素ボックスの幅に対する相対値です*/
	パディング下部: 20%;
	背景: ピンク;
	色: #666;
	位置: 相対的;
	オーバーフロー: 非表示;
}
p{
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	背景: 黄色;
}