移动端布局：如何通过媒体查询实现自适应页面设计？

20 min read

当然可以。以下是一个简单的移动端自适应布局示例，使用媒体查询来针对不同屏幕大小应用不同的样式：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>移动端自适应布局示例</title>
	<style type="text/css">
		/* 默认样式 */
		body {
			font-size: 16px;
		}

		h1 {
			font-size: 1.5rem;
		}

		p {
			font-size: 1rem;
		}

		/* 媒体查询 */
		@media only screen and (max-width: 600px) {
			/* 适配手机竖屏 */

			body {
				font-size: 14px;
			}

			h1 {
				font-size: 1.2rem;
			}

			p {
				font-size: 0.8rem;
			}
		}

		@media only screen and (min-width: 601px) {
			/* 适配平板 */

			body {
				font-size: 18px;
			}

			h1 {
				font-size: 2rem;
			}

			p {
				font-size: 1.2rem;
			}
		}
	</style>
</head>
<body>
	<h1>移动端自适应布局示例</h1>
	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>
</body>
</html>

当屏幕宽度小于等于600px时，应用适配手机竖屏的样式，当屏幕宽度大于600px时，应用适配平板的样式。可以根据需要添加更多的媒体查询以适配更多屏幕大小。