隨著移動互聯網時代的到來，越來越多的網站需要適配不同的設備大小和屏幕分辨率。這種適應性稱之為“響應式設計”。而HTML5提供了一些新的標簽和屬性來幫助實現響應式設計，讓網站更好地適配各種設備。

其中一個關鍵的標簽是meta標簽，在標簽中添加以下代碼：

其中width=device-width告訴瀏覽器，頁面寬度應該等于設備寬度，initial-scale=1.0則指定默認縮放級別為1。

接下來，我們需要讓網頁布局適應各種設備大小。使用CSS3中的新屬性“媒體查詢”可以很方便地實現。在CSS文件中添加以下代碼：

@media (max-width: 800px) {
/* 當設備寬度不超過800px時應用以下CSS */
.main {
width: 80%;
margin: 0 auto;
font-size: 14px;
}
}

這段代碼表示當設備寬度不超過800px時，將.main元素的寬度設置為80%，居中顯示，并將字體大小設置為14px。

使用HTML5的語義化標簽也可以更好地實現響應式設計。例如，使用