在移動互聯網的時代，手機屏幕自適應效果越來越受到重視。本文將介紹。

1. 使用viewport標簽

在HTML的head標簽中加入以下代碼：

```etaametentitial-scale=1.0">

這樣可以讓頁面的寬度適應設備的寬度，同時初始縮放比例為1.0。

2. 使用百分比布局

在設計頁面時，使用百分比布局可以讓頁面元素的寬度和高度隨著屏幕的大小而變化。例如：

這樣就可以讓這個div在不同屏幕大小下保持相同的比例。

3. 使用媒體查詢

媒體查詢可以讓頁面在不同屏幕大小下采用不同的CSS樣式。例如：

```ediadax-width: 480px){

body{t-size:14px;

}

這樣在屏幕寬度小于等于480px時，body元素的字體大小就會變為14px。

綜上所述，使用viewport標簽、百分比布局和媒體查詢可以實現手機屏幕自適應效果。在設計移動端頁面時，需要考慮不同屏幕大小的適應性，使頁面在不同屏幕下都能夠呈現出最佳的效果。