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啦！