HTML 手機自適應是一種能夠在不同設備上展示良好的網頁排版方式，讓我們的網頁隨著不同設備屏幕的大小而自動適應展示。下面我們來介紹一下 HTML 手機自適應的常用代碼。 首先，我們需要設置網頁的 viewport，這樣才能告訴瀏覽器如何正確解析頁面。以下是一段常見的 viewport 設置代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中，width=device-width 表示頁面寬度等于設備寬度，initial-scale=1.0 表示初始縮放比例為 1.0。 接下來，我們需要使用 CSS 媒體查詢來根據設備屏幕大小和設備類型等因素調整樣式以達到最佳展示效果。以下是一段媒體查詢代碼的示例：

@media screen and (max-width: 480px) {
/* 在屏幕寬度小于 480px 時應用的樣式 */
body {
font-size: 14px;
}
}

以上代碼表示在屏幕寬度小于 480px 時，body 元素的字體大小為 14px。 另外，我們還可以使用相對單位（如 em 和 rem）來設置元素大小和位置，這樣能夠使頁面更好地與設備屏幕相適應。以下是一段使用 rem 單位設置元素大小的示例代碼：

body {
font-size: 16px; /* 設置基準字體大小 */
}
.container {
width: 20rem; /* 相對于基準字體的大小進行設置，可以根據設備寬度自動適應 */
}

最后，我們需要進行測試和調試，以確保網頁在不同設備上的展示效果良好?？梢允褂脼g覽器開發者工具、真機調試等方式進行測試。 以上是 HTML 手機自適應的常用代碼，希望對大家有所幫助。