網頁的自適應性越來越受到注重，因為不同的設備都有各自的屏幕尺寸。HTML提供了一種簡單的方式來創建自適應的網頁，通過使用CSS的@media規則。

在CSS中，我們可以使用@media查詢來檢查不同屏幕大小的設備，并提供不同的樣式。如下是一個常見的基本代碼塊：

@media only screen and (max-width: 600px) {
/* 在600像素屏幕以下的設備中應用這些CSS樣式 */
}

在這個代碼塊中，我們告訴CSS只有選擇的屏幕大小在600px以下時才應用樣式。這可以讓我們為移動設備和小屏幕提供更好的體驗。

另一種重要的方法是使用響應式布局和相對單位。相對單位如“%”和“em”可以自適應改變大小，而不是像像素值一樣固定。這使我們能夠創建更靈活的布局：

div {
width: 100%;
height: 50%;
}
@media only screen and (max-width: 600px) {
div {
width: 100%;
height: auto;
}
}

在這個例子中，我們首先定義了一個div元素，它占用其父元素的100％寬度和50％高度。在600像素以下的屏幕上，我們需要更改div的高度，所以我們使用“auto”來讓它自適應高度。

總之，HTML提供了許多工具來為不同設備創建自適應的網頁。使用CSS的@media規則和相對單位可以讓你創建強大的響應式網頁布局，加強用戶體驗。