CSS 适配手机端技巧
1. Viewport Meta 标签
最基础的一步，在 HTML <head> 中添加：
html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">2. 媒体查询（Media Queries）
根据屏幕宽度应用不同样式，是响应式设计的核心：
css
/* 桌面端默认样式 */
.container { width: 1200px; }
/* 平板 */
@media screen and (max-width: 768px) {
.container { width: 100%; padding: 0 16px; }
}
/* 手机 */
@media screen and (max-width: 480px) {
.container { width: 100%; padding: 0 12px; }
}常用断点参考：
480px— 小屏手机768px— 平板1024px— 小桌面/大平板1200px— 桌面
3. 弹性单位
避免使用固定 px，优先使用相对单位：
| 单位 | 说明 | 适用场景 |
|---|---|---|
rem | 相对于根元素 font-size | 字体大小、间距 |
em | 相对于父元素 font-size | 组件内部间距 |
vw/vh | 视口宽度/高度的百分比 | 全屏布局、大标题 |
% | 相对于父元素 | 宽度、布局 |
vmin/vmax | 视口较小/较大边的百分比 | 自适应正方形等 |
css
html { font-size: 16px; }
/* 手机端缩小基准字号 */
@media screen and (max-width: 480px) {
html { font-size: 14px; }
}
.title { font-size: 1.5rem; } /* 随基准自动缩放 */
.hero { height: 100vh; } /* 撑满视口高度 */
.box { width: 90vw; } /* 视口宽度的 90% */4. Flexbox 弹性布局
手机适配最实用的布局方式：
css
.nav {
display: flex;
flex-wrap: wrap; /* 放不下时自动换行 */
gap: 8px;
justify-content: space-between;
}
.nav-item {
flex: 1 1 120px; /* 最小 120px，自动伸缩 */
}5. Grid 网格布局
用 auto-fit / auto-fill 实现自动响应式网格，无需媒体查询：
css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}桌面端会排多列，手机端自动变为单列。
6. clamp() 函数
一个函数实现最小值、首选值、最大值的自适应，非常强大：
css
.title {
/* 最小 16px，首选 4vw，最大 32px */
font-size: clamp(16px, 4vw, 32px);
}
.container {
/* 宽度在 300px ~ 1200px 之间自适应 */
width: clamp(300px, 90vw, 1200px);
margin: 0 auto;
}
.card {
padding: clamp(12px, 3vw, 32px);
}7. 图片自适应
css
img {
max-width: 100%;
height: auto;
display: block;
}
/* 现代写法：用 aspect-ratio 保持比例 */
.thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}配合 HTML <picture> 标签按设备加载不同尺寸图片：
html
<picture>
<source media="(max-width: 480px)" srcset="img-small.webp">
<source media="(max-width: 768px)" srcset="img-medium.webp">
<img src="img-large.webp" alt="...">
</picture>8. 触摸友好
手机端按钮/链接的点击区域至少 44px × 44px（Apple 推荐）或 48px × 48px（Google 推荐）：
css
.btn {
min-height: 44px;
min-width: 44px;
padding: 12px 24px;
touch-action: manipulation; /* 消除 300ms 点击延迟 */
}
/* 去掉手机端的 hover 残留效果 */
@media (hover: none) {
.btn:hover {
background: inherit;
}
}9. 安全区域适配（刘海屏/底部横条）
针对 iPhone X 及以上的异形屏：
css
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.bottom-bar {
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}10. 隐藏/显示特定内容
css
/* 仅手机端显示 */
.mobile-only { display: none; }
@media (max-width: 768px) {
.mobile-only { display: block; }
.desktop-only { display: none; }
}11. Container Queries（容器查询，现代方案）
比媒体查询更灵活，根据父容器而非视口来响应：
css
.card-wrapper {
container-type: inline-size;
}
@container (max-width: 400px) {
.card {
flex-direction: column;
}
}实用建议总结
| 策略 | 推荐度 | 说明 |
|---|---|---|
| Mobile First | ⭐⭐⭐⭐⭐ | 先写手机样式，用 min-width 媒体查询向上扩展 |
| clamp() | ⭐⭐⭐⭐⭐ | 替代大量媒体查询，一行搞定自适应 |
| Flexbox + Grid | ⭐⭐⭐⭐⭐ | 布局首选，天然响应式 |
| rem 单位 | ⭐⭐⭐⭐ | 统一缩放，改根字号即可全局调整 |
| Container Queries | ⭐⭐⭐⭐ | 组件级响应式，适合设计系统 |
Mobile First 的写法示范：
css
/* 基础：手机端样式 */
.sidebar { display: none; }
.content { width: 100%; }
/* 向上扩展：平板 */
@media (min-width: 768px) {
.sidebar { display: block; width: 240px; }
.content { width: calc(100% - 240px); }
}
/* 向上扩展：桌面 */
@media (min-width: 1200px) {
.sidebar { width: 300px; }
}这种「先小后大」的方式比「先大后小」更高效，因为手机端是基础，逐步增强到大屏幕。