在移動端網頁設計中，css的寫法必須與桌面端網頁有所不同，以適應不同的瀏覽器和設備。下面將介紹一些在移動端網頁中常用的css寫法。

響應式布局

移動端設備的屏幕尺寸多種多樣，為了在不同設備上正確顯示網頁，我們需要使用響應式布局?？梢酝ㄟ^@media查詢來檢測屏幕寬度，從而改變元素的樣式和布局。例如：

@media screen and (max-width: 768px) {
/* 屏幕寬度小于等于768px時的樣式 */
body {
font-size: 16px;
}
.container {
width: 100%;
}
}
@media screen and (min-width: 769px) {
/* 屏幕寬度大于768px時的樣式 */
body {
font-size: 18px;
}
.container {
width: 80%;
margin: 0 auto;
}
}

移動端適配

移動端設備的像素密度普遍較高，因此我們需要使用適當的css規則來適應高像素密度的屏幕。可以通過使用viewport元標簽和rem單位來實現。例如：

/* 在head標簽中添加以下代碼 *//* html標簽中添加以下代碼 */
html {
font-size: 16px;
}
/* 這段代碼將確保所有的字體和布局都能夠適應不同的屏幕尺寸。
在需要使用rem單位的地方，可以使用以下公式：
元素寬度/設計稿寬度*10rem 
這樣可以根據設計稿來設置元素在不同屏幕上的大小。*/

移動端滑動

移動端網頁中經常需要使用滑動效果，例如左右滑動或上下滑動。這可以通過使用css中的transform和transition屬性來實現。例如：

/* 利用translateX來實現左右滑動，設置過渡時間為0.3秒 */
.slide {
transform: translateX(100%);
transition: transform 0.3s;
}
/* 利用translateY來實現上下滑動 */
.slide {
transform: translateY(100%);
transition: transform 0.3s;
}
/* js代碼中設置動畫效果 */
$(".slide").on("click", function() {
$(this).toggleClass("active"); //此處使用toggleClass來切換樣式
});

以上就是一些在移動端網頁中常用的css寫法，它們可以幫助我們更好地應對不同的設備和瀏覽器。需要注意的是，這些寫法只是提供了一些參考，具體的實現還需要根據項目的實際情況進行調整。