現在越來越多的人使用手機進行網頁瀏覽，因此開發響應式網頁成為了一種趨勢。css在響應式設計中起著至關重要的作用。下面我們就來了解下如何使用css制作手機端響應式網頁。

首先，在開始編寫css前，我們要了解手機屏幕的尺寸和分辨率。不同的手機屏幕會有不同的分辨率，因此我們需要根據不同分辨率來對網頁進行適配。比較常見的手機屏幕分辨率有320px、375px和414px。我們可以使用CSS3中的@meida來實現響應式布局。

下面是一個實例代碼：

/* 手機端 CSS */
@media screen and (max-width: 414px) {
.container {
width: 100%;
margin: 0 auto;
}
.header {
font-size: 20px;
padding: 20px;
}
.nav {
display: none;
}
.main {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.footer {
margin-top: 10px;
font-size: 14px;
}
}

這段代碼就是針對414px分辨率的手機布局。在這種布局下，我們將容器寬度設為100%，使網頁能夠占據整個屏幕，頭部和底部的字體大小也進行了相應的調整，主體內容的寬度也改為100%。此外，還將導航欄設為不可見，因為在手機端上一般以抽屜式導航為主。

不同分辨率的手機屏幕布局代碼不同，通過適配不同的分辨率可以使我們的網頁更加人性化。當然，還有其他的響應式布局方式，可以根據自己的實際需求進行選擇。