CSS是網(wǎng)頁設(shè)計(jì)中非常重要的一部分，使用CSS可以控制網(wǎng)頁的外觀和布局。在現(xiàn)代社會中，越來越多的人使用移動設(shè)備瀏覽網(wǎng)頁，因此，將CSS代碼適配到手機(jī)端成為了一個非常重要的問題。

@media (max-width: 768px) {
/* 在寬度小于768px時應(yīng)用以下CSS樣式 */
body {
font-size: 14px;
}
.header {
height: 60px;
}
.nav {
display: none;
}
}

在上面的代碼中，我們使用了CSS3的媒體查詢（media query），這個屬性可以根據(jù)用戶設(shè)備的屏幕寬度來判斷應(yīng)該應(yīng)用哪些CSS樣式。例如，上面的代碼中，當(dāng)用戶設(shè)備的屏幕寬度小于768px時，我們就將body標(biāo)簽字體大小設(shè)置為14px，將頭部(header)高度設(shè)置為60px，并且將導(dǎo)航欄(nav)隱藏起來。

除了使用媒體查詢之外，我們還可以使用響應(yīng)式網(wǎng)頁設(shè)計(jì)（responsive web design），這種設(shè)計(jì)方法可以讓網(wǎng)頁自動適配不同的設(shè)備，無論是大屏幕筆記本還是小屏幕手機(jī)，都可以得到優(yōu)質(zhì)的用戶體驗(yàn)。

/* 響應(yīng)式網(wǎng)頁設(shè)計(jì) */
/* 最大寬度為768px */
@media (max-width: 768px) {
.container {
width: 100%;
}
.box {
margin: 0;
padding: 10px;
}
}
/* 最小寬度為769px */
@media (min-width: 769px) {
.container {
width: 768px;
margin: 20px auto;
}
.box {
margin: 20px;
padding: 30px;
}
}

上面的代碼展示了響應(yīng)式網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)。我們在max-width: 768px時，將容器(container)的寬度設(shè)置為100%，將盒子(box)的外邊距和內(nèi)邊距設(shè)置為10px。在min-width: 769px時，將容器的寬度設(shè)置為768px，并且將容器居中于頁面中央，將盒子的外邊距和內(nèi)邊距分別設(shè)置為20px和30px。