フロントエンドの自動適応レイアウトの解決策

フルードレイアウト#

パーセンテージや他の単位を使用して、長さや幅を表します。これにより、全体の長さや幅が変化すると、内部のコンテンツも変化します。

パーセントの使用#

パーセントを直接使用すると、ページの幅の変化に応じて拡大縮小されます。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.container-box {
			width: 100%;
			height: 100vh;
			background-color: orange;
			padding: 1px;
		}
		.first,
		.second,
		.third {
			width: 80%;
			height: 30%;
			background-color: skyblue;
			margin: 1% auto;
		}
	</style>

	<body>
		<div class="container-box">
			<div class="first">1</div>
			<div class="second">2</div>
			<div class="third">3</div>
		</div>
	</body>
</html>

rem の使用#

幅の変化に応じて、ルート要素のhtmlのfont-sizeプロパティのサイズを変更し、幅の変更に応じてページ内の要素のサイズを変更できます。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		.container-box {
			width: 100%;
			height: 100vh;
			padding: 1px;
			background-color: orange;
		}
		.first,
		.second,
		.third {
			width: 20rem;
			height: 20rem;
			margin: 1rem auto;
			background-color: skyblue;
		}
		@media screen and (max-width: 768px) {
			html {
				font-size: 12px;
			}
		}
	</style>

	<body>
		<div class="container-box">
			<div class="first">1</div>
			<div class="second">2</div>
			<div class="third">3</div>
		</div>
	</body>
</html>

メディアクエリの直接使用#

これは実際には rem の使用と似ていますが、異なる幅の下でのスタイルを直接上書きするだけです。

フレックスボックス#

display: flex

これはページ全体が単一の div の場合に便利ですが、複数の div が自動調整する必要がある場合は、レイアウトが相互に影響する可能性があります。

グリッドレイアウト#

レスポンシブを実現するために、grid のプロパティを使用します。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		.container-box {
			width: 100%;
			height: 100vh;
			padding: 1px;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 列自動調整、最小幅200px */
			grid-gap: 10px; /* グリッドの間隔を10pxに設定 */
		}
		.item {
			background-color: #ddd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24px;
		}
	</style>

	<body>
		<div class="container-box">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
		</div>
	</body>
</html>

以上が一般的ないくつかのレスポンシブデザインの方法です。