在現代社會中，移動設備的普及程度越來越高，許多網站必須對移動設備進行優化以提供更好的用戶體驗。在這個過程中，兼容性問題是不可避免的。尤其是在 CSS 樣式方面，要考慮兼容性問題的同時，還要兼顧到不同設備的屏幕大小等問題。

那么，如何在 CSS 中編寫手機兼容性寫法呢？以下是一些有效的建議：

/* 使用百分比單位 */
.container {
width: 90%;
margin: 0 auto;
}
/* 使用 Max-Width */
.img-responsive {
max-width: 100%;
height: auto;
}
/* 避免使用固定的像素單位 */
.navbar {
font-size: 1.2em;
padding: 0.5em;
/* 避免使用 padding: 10px; */
}
/* 使用媒體查詢 */
@media (max-width: 767px) {
.navbar {
font-size: 1.1em;
padding: 0.3em;
}
}
/* 避免使用絕對定位 */
.box {
position: relative;
/* 避免使用 position: absolute; */
}
/* 使用 Rem 單位 */
html {
font-size: 62.5%;
}
.box {
width: 20rem;
}
/* 最好使用簡單 CSS 屬性 */
.header-text {
font-size: 2em;
line-height: 1.2;
/* 避免使用 text-overflow: ellipsis; 等屬性 */
}

以上是一些在 CSS 中編寫手機兼容性寫法的實用建議。當然，具體的實現還是要根據網站的具體情況來決定，同時不斷學習新技術和新知識，才能更好地應對兼容性問題。