BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]アダプティブスクエアを実現するCSSの例

2022-02-02 06:09:11

従来の正方形の書き方は、以下のように長さ＝幅を直接固定値で書いていました。 

.box{
		width: 200px;
		height: 200px;
		background: pink;
		color: #666;
	}

しかし、モバイルデザインではモバイル端末によって画像の幅が変わるケースが多いため、アダプティブスクエアの実装が必要です。

ここでは、よりシンプルな方法を2つ紹介します。

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

.box{
		width: 20%;//width:20vw is fine
		height: 20vw;
		background: pink;
	}

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
	</head>
	<style>
                *{
            	    margin: 0;
	            padding: 0;
                }
		.box{
			width: 20%;
			/* Set the height to 0 to avoid the box from being stretched out by the content */
			height: 0px;
			/* set the height of the box to
			   Set the same fixed width or percentage as width.
			   The percentage is relative to the width of the parent's box */
			padding-bottom: 20%;
			background: pink;
			color: #666;
		}
	</style>
	<body>
		<div class="box">	
	            <p>&nbsp;This is an adaptive square</p>
		</div>	
	</body>
</html>

ここで height: 0px; と書かないと、ボックスの中にコンテンツがあるとき、コンテンツによってボックスが膨らんでしまうので注意しましょう。

padding-bottomをpadding-topに変更するとどうなりますか？

正方形の中にコンテンツがある場合、コンテンツは正方形の外側になることがわかります。デフォルトのテキストは左から右、上から下へと配置されるので、paddin-topの後にテキストが正方形の外側になるため、ここではpaddin-bottomとpadding-topは混在していないのです

また、ボックスの高さが設定されているため : 0px;の中に子要素がある場合、高さを正しく設定することができません。そこで 

position: absolute; so that the current content out of the document flow, then the content of the height of the percentage reference to the parent's width
*{
	margin: 0;
	padding: 0;
}
.box{
	width: 20%;
	/* Set the height to 0 to avoid the box from being stretched out by the content */
	height: 0px;
	/* set the height of the box to
	   Set the same fixed width or percentage as width.
	   The percentage is relative to the width of the parent's box */
	padding-bottom: 20%;
	background: pink;
	color: #666;
	position: relative;
	overflow: hidden;
}
p{
	position: absolute;
	width: 100%;
	height: 100%;
	background: yellow;
}



*{
	margin: 0;
	padding: 0;
}
.box{
	width: 20%;
	/* Set the height to 0 to avoid the box from being stretched out by the content */
	height: 0px;
	/* set the height of the box to
	   Set the same fixed width or percentage as width.
	   The percentage is relative to the width of the parent's box */
	padding-bottom: 20%;
	background: pink;
	color: #666;
	position: relative;
	overflow: hidden;
}
p{
	position: absolute;
	width: 100%;
	height: 100%;
	background: yellow;
}

こうすることで、ボックスの中身が正方形でいっぱいになります

CSSで適応型正方形を実現する方法について紹介したこの記事は、より関連するCSS適応型正方形のコンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を引き続き閲覧してください、私はあなたがより多くのスクリプトハウスをサポートするために今後を願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します