隨著移動設備的普及，自適應布局成為了web 開發中必須掌握的技能之一。作為前端開發人員，我們需要保證我們編寫的頁面能夠適應各種大小的設備屏幕。

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

上面的代碼是自適應布局的第一步，通過這個 meta 標簽，我們可以指定頁面寬度為設備寬度，并設置縮放比例為1.0。

body {
margin: 0;
padding: 0;
}

我們需要在 CSS 中消除 body 的默認樣式，這樣可以使我們的頁面更好地適應各種設備。

@media screen and (max-width: 600px) {
body {
font-size: 16px;
}
}
@media screen and (min-width: 601px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
@media screen and (min-width: 901px) {
body {
font-size: 20px;
}
}

使用媒體查詢可以讓我們定義不同設備下的頁面布局和樣式，上面的代碼就是一個簡單的示例，分別定義了三個分界點，并分別設置了不同的字體大小。

總結：

自適應布局是一種可以讓你的頁面適應各種設備的解決方案，通過設置 meta 標簽，消除 body 的默認邊距和字體大小，以及使用媒體查詢，可以實現一個具有響應式布局的網頁。