隨著移動設備的普及，越來越多的用戶使用手機或平板電腦訪問網站。因此，網站的響應式設計變得越來越重要。在這篇文章中，我們將介紹HTML如何做響應式適配。

一、使用viewport標簽

viewport標簽是用來設置網頁的視口大小的。在移動設備上，viewport標簽非常重要，因為它可以讓網頁適應不同的屏幕大小。在HTML中，可以使用以下代碼來設置viewport標簽：

```etaametentitial-scale=1.0">

itial-scale=1.0表示網頁的初始縮放比例應該為1.0。

二、使用媒體查詢

媒體查詢是一種CSS3的技術，它可以根據設備的屏幕大小來加載不同的CSS樣式。通過媒體查詢，可以為不同的設備設置不同的樣式，從而使網頁適應不同的屏幕大小。以下是一個簡單的媒體查詢的例子：

```ediaax-width: 768px) {

/* 樣式 */

ax-width: 768px表示當瀏覽器窗口的寬度小于等于768像素時，應用這些樣式。

三、使用彈性布局

彈性布局是一種CSS技術，它可以讓網頁的布局隨著設備的屏幕大小自動調整。通過使用彈性布局，可以讓網頁在不同的設備上呈現出相似的外觀和體驗。以下是一個簡單的彈性布局的例子：

```tainer {

display: flex;

flex-wrap: wrap;

這里的display: flex表示使用彈性布局，flex-wrap: wrap表示當子元素超出父元素時換行。

四、使用圖片響應式

圖片也是響應式設計中的重要部分。在移動設備上，圖片的大小和分辨率應該適應不同的屏幕大小。通過使用圖片響應式的技術，可以讓圖片在不同的設備上自動適應大小和分辨率。以下是一個簡單的圖片響應式的例子：

```gplepleple@2x.jpg 2x">

這里的srcset屬性指定了不同分辨率的圖片，1x表示設備的像素密度為1，2x表示設備的像素密度為2。

通過使用以上的技術，可以讓網頁在不同的設備上自動適應大小和分辨率。viewport標簽可以讓網頁適應不同的屏幕大小，媒體查詢可以加載不同的CSS樣式，彈性布局可以讓網頁的布局自動調整，圖片響應式可以讓圖片自動適應大小和分辨率。