CSS移動端自適應是現代Web設計中非常重要的一個環節。越來越多的人使用移動設備瀏覽網站，因此設計者需要為移動設備進行優化設計的頁面才能提供良好的用戶體驗。下面我們談談如何使用CSS進行移動端自適應設計。

1.使用媒體查詢進行響應式布局

/* 普通設備樣式 */
div{
width: 100px;
height: 100px;
background-color: red;
}
/* 移動設備樣式 */
@media screen and (max-width: 767px){
div{
width: 50px;
height: 50px;
background-color: blue;
}
}

2.使用Viewport設置移動端頁面寬度

/* 頁面寬度設置為設備寬度 */

3.使用Flexbox進行移動端布局

/* 父元素設置flex布局 */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 子元素等寬排列 */
.item {
flex: 1;
width: 100%;
}

4.為移動端設備使用合適的字體大小和行高

body{
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 767px){
body{
font-size: 14px;
line-height: 20px;
}
}

總結，CSS移動端自適應設計是Web設計不可缺少的一部分，我們可以使用媒體查詢、Viewport、Flexbox和字體大小等方法使網站在移動設備上呈現出更好的用戶體驗。