近年來，隨著移動設(shè)備的流行，越來越多的網(wǎng)頁需要適配手機(jī)的屏幕尺寸。而CSS作為前端開發(fā)中重要的一環(huán)，其在手機(jī)界面的布局設(shè)計上也顯示出了越來越重要的作用。下面就來介紹一些常用的CSS技巧，讓我們的頁面更加適配手機(jī)屏幕。

使用媒體查詢

媒體查詢是CSS3中新增的語法，用于篩選不同設(shè)備類型的樣式。我們可以根據(jù)屏幕的寬度、高度、設(shè)備類型等屬性來設(shè)置CSS樣式。通過以下示例代碼，可以讓我們在不同屏幕尺寸下自動切換不同的樣式：

/* 當(dāng)屏幕寬度小于等于768px時，應(yīng)用這一段CSS樣式 */
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
/* 當(dāng)屏幕寬度大于768px時，應(yīng)用這一段CSS樣式 */
@media (min-width: 769px) {
body {
font-size: 18px;
}
}

使用彈性布局

彈性布局（Flexbox）是CSS3中新增的一種布局方式，它可以很好地適配不同尺寸的設(shè)備屏幕。使用彈性布局可以方便地對元素的排列方向、對齊方式、間距等進(jìn)行控制。以下是一個簡單的彈性布局實(shí)現(xiàn)兩欄布局的示例：

.container {
display: flex; /* 設(shè)置為彈性容器 */
}
.item1 {
flex: 1; /* 自動填充剩余空間 */
}
.item2 {
flex: 1; /* 自動填充剩余空間 */
}

使用rem單位

在手機(jī)屏幕適配中，rem單位有著獨(dú)特的優(yōu)勢。它相對于根元素字體大小，可以讓我們設(shè)計出完美適配不同屏幕大小的元素。通常我們將根元素的字體大小設(shè)置為屏幕寬度的1/10，像素單位改為rem即可。以下是一個簡單的rem單位使用示例代碼：

html {
font-size: 14px;
}
div {
width: 2rem;
height: 1rem;
}

總之，CSS在手機(jī)屏幕的適配中是不可或缺的一部分。通過合理地運(yùn)用媒體查詢、彈性布局、rem單位等技巧，我們可以輕松地設(shè)計出適配不同屏幕尺寸的頁面，提高用戶體驗。