HTML5自適應布局是為了應對越來越多的移動設備而產生的一種布局方式。它可以讓網頁在不同屏幕大小和分辨率上呈現出最佳效果，提高用戶體驗。下面是一個示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自適應布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
margin: 0; padding: 0;
font-size: 16px; line-height: 1.5;
}
/* 使用vw單位進行字體和寬度的自適應 */
h1 { font-size: 10vw; }
p { font-size: 5vw; }
img { max-width: 100%; height: auto; }
/* 媒體查詢實現不同屏幕大小下的不同布局 */
@media screen and (min-width: 768px) {
h1 { font-size: 5vw; }
p { font-size: 2.5vw; }
}
@media screen and (min-width: 1024px) {
h1 { font-size: 3vw; }
p { font-size: 1.5vw; }
}
</style>
</head>
<body>
<h1>HTML5自適應布局</h1>
<img src="img.jpg" alt="自適應圖片">
<p>這是一段自適應文字。</p>
</body>
</html>在這段代碼中，我們使用了標簽設置了網頁的字符編碼和視口大小。然后，使用了一個