在移動端網頁設計中，頭部是非常重要的組成部分，它不僅僅是展現網站名稱和LOGO的地方，還能起到導航、搜索、登錄等功能。那么在CSS中如何設計移動端的頭部呢？

首先我們需要針對不同屏幕大小設置不同的樣式，因為在移動設備上，網頁的顯示區域往往比較小。我們可以使用媒體查詢來實現這一點。例如：

@media screen and (max-width: 767px) {
/* 在屏幕寬度小于767px時的樣式 */
header {
height: 50px;
padding: 5px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
}
@media screen and (min-width: 768px) {
/* 在屏幕寬度大于等于768px時的樣式 */
header {
height: 80px;
padding: 10px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
}

在移動設備上，我們可以將頭部的高度和內邊距縮小，使其更加精簡。同時，寬度設置為100%可以使其充滿屏幕。在較大屏幕上，則需要加大頭部的高度和內邊距，以適應更為寬闊的顯示區域。

其次，我們需要選擇合適的字體大小和顏色。在移動端，字體大小要盡量縮小，而且建議使用sans-serif字體，以保證可讀性。顏色方面，可以根據頁面整體色調來進行調整。例如：

header {
font-size: 16px;
font-family: sans-serif;
color: #333;
}

最后，我們可以用一些小技巧來美化頭部，比如添加下拉菜單、搜索框、返回按鈕等。這些元素可以用絕對定位來實現，如：

header {
position: relative;
}
header .menu {
position: absolute;
left: 10px;
top: 10px;
}
header .search {
position: absolute;
right: 10px;
top: 10px;
}
header .back {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}

通過以上的設計和實現，我們可以打造出一個簡潔美觀的移動端頭部，為用戶提供更好的體驗。