给我写个响应式的代码

以下是一个简单的响应式代码示例，它会在不同的屏幕大小下显示不同的样式：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>响应式网页</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			font-size: 16px;
			line-height: 1.5;
			color: #333;
		}

		.container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 20px;
		}

		@media screen and (max-width: 768px) {
			.container {
				padding: 10px;
			}
		}

		@media screen and (max-width: 480px) {
			.container {
				padding: 5px;
			}
		}

		h1 {
			font-size: 36px;
			font-weight: bold;
			text-align: center;
			margin-top: 50px;
			margin-bottom: 20px;
		}

		p {
			margin-bottom: 20px;
		}

		@media screen and (max-width: 768px) {
			h1 {
				font-size: 28px;
				margin-top: 30px;
				margin-bottom: 10px;
			}

			p {
				margin-bottom: 10px;
			}
		}

		@media screen and (max-width: 480px) {
			h1 {
				font-size: 22px;
				margin-top: 20px;
				margin-bottom: 5px;
			}

			p {
				margin-bottom: 5px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>响应式网页</h1>
		<p>这是一个响应式网页示例，它可以在不同的屏幕大小下自动调整样式。</p>
		<p>在大屏幕上，它会显示较大的标题和段落，并且在页面中央显示。在小屏幕上，它会缩小字体大小，并将标题和段落左对齐。</p>
	</div>
</body>
</html>

在上述代码中，我们使用了 @media 查询来设置不同的屏幕大小下的样式。在大屏幕上，容器的 padding 为 20px，标题的字体大小为 36px，段落的 margin-bottom 为 20px。在中等屏幕上，容器的 padding 为 10px，标题的字体大小为 28px，段落的 margin-bottom 为 10px。在小屏幕上，容器的 padding 为 5px，标题的字体大小为 22px，段落的 margin-bottom 为 5px。

这个响应式网页示例可以在不同的设备上自动适应屏幕大小，提供更好的用户体验。