在現代的網頁設計中，CSS技巧越來越多樣化，但兼容不同設備的問題一直是設計師和開發人員需要面對的一個核心問題，特別是對于手機用戶來說更是如此。以下是幾個CSS兼容手機的技巧：

1.使用CSS media查詢設定視口尺寸

@media screen and (max-width: 480px) { 
/* 小于等于480px寬度的設備 */
body { width: 100%; }
}

2.使用CSS百分比布局

.container {
width: 100%;
max-width: 960px; /* 設置最大寬度 */
margin: 0 auto;
}
.column {
float: left;
width: 50%; /* 寬度取百分比 */
}

3.使用CSS3媒體查詢判斷設備類型

@media only screen and (max-device-width: 768px) {
/* iPad縱向 */
html {
-webkit-text-size-adjust:none;
}
}

4. 使用彈性盒子布局

.container {
display: flex; /* 設置彈性容器 */
flex-direction: row; /* 設置彈性容器的方向 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.item {
flex: 1; /* 伸縮比例 */
}

以上是一些CSS兼容手機的技巧，但同時也需要注意幾個問題，如CSS文件大小、CSS選擇器性能等，要合理使用CSS技巧，盡量減少不必要的代碼。