隨著移動互聯網的發展，越來越多的人開始使用移動設備上網瀏覽。為了讓網頁在不同的屏幕尺寸上都能正常顯示，html5提供了自適應布局的方案。

首先，在html文件的head標簽中添加以下代碼：

這行代碼的作用是設置viewport的寬度為設備的寬度，initial-scale為1，表示自適應網頁的初始縮放比例為100%。

接下來，設置CSS樣式。使用百分比或rem單位來設置元素的寬度和高度，這樣可以使元素隨著屏幕尺寸的變化而自適應。同時，使用@media查詢來判斷屏幕尺寸，根據不同的尺寸設置對應的樣式。

@media screen and (max-width: 768px) {
/* 小屏幕樣式 */
body {
font-size: 14px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
/* 中等屏幕樣式 */
body {
font-size: 16px;
}
}
@media screen and (min-width: 993px) {
/* 大屏幕樣式 */
body {
font-size: 18px;
}
}

上面的代碼設置了三個不同的屏幕尺寸下，body元素的font-size大小。可以根據需要設置其他CSS屬性。

最后，使用圖片時也要注意自適應。設置圖片的寬度為100%可以讓其自適應屏幕寬度。

img {
max-width: 100%;
height: auto;
}

通過以上設置，可以讓網頁在不同的屏幕尺寸上都能自適應顯示，提升用戶體驗。