隨著智能手機的普及，越來越多的人開始使用手機上網，而響應式網頁設計成為了網頁設計的重要趨勢。CSS技術在移動端的應用也越來越廣泛。那么，在手機上如何寫CSS呢？下面我們來詳細介紹。
1. 引入CSS文件
<head> <link rel="stylesheet" href="mobile.css"> </head>
在網頁的<head></head>部分，通過<link>標簽引入CSS文件。CSS文件的文件名可以自定義，但為了分辨起來方便，一般以mobile.css為命名。
2. 設置viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
通過<meta>標簽設置viewport，使網頁可以根據設備屏幕寬度進行自適應。其中，width=device-width表示寬度等于設備屏幕寬度，initial-scale=1表示初始縮放比例=1。
3. 媒體查詢
@media screen and (max-width: 768px) {
/* 在屏幕寬度小于等于768px時生效 */
body {
font-size: 16px; /* 設置文字大小為16px */
}
}使用媒體查詢可以根據設備屏幕寬度設置不同的CSS屬性。在上面的代碼中，設置了當屏幕寬度小于等于768px時，body元素內的文字大小為16px。
4. 盒模型
.box {
width: 100%; /* 設置元素寬度為100% */
box-sizing: border-box; /* 設置盒模型為border-box */
padding: 10px; /* 設置內邊距為10px */
border: 1px solid #ccc; /* 設置邊框為1px實線灰色 */
}在移動端的網頁設計中，設置盒模型為border-box可以更好地控制元素尺寸，避免出現溢出的情況。以上代碼中，通過設置盒模型為border-box，border和padding的尺寸都計入了元素寬度，不會出現元素寬度超出預期的情況。
通過以上步驟，就可以輕松地在手機上編寫CSS啦！