布局优化如何适配移动端？媒体查询怎么写？
核心断点设置
css
/* 手机端 (≤768px) */ @media (max-width: 768px) { .header { padding: 10px; } .menu { display: none; } } /* 平板 (769px~1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .content { width: 90%; } } /* 桌面 (>1024px) */ @media (min-width: 1025px) { .container { max-width: 1200px; } }移动端优化清单
| 问题 | 解决方案 | 代码示例 |
|---|---|---|
| 字体过小 | rem替代px |
html { font-size: 16px; } |
| 点击区域小 | 扩大触控区 | button { padding: 12px 24px; } |
| 图片加载慢 | 响应式图片 | <img srcset="small.jpg 480w, large.jpg 1024w"> |
测试工具
- Chrome开发者工具 → 切换设备模式
- Responsinator
更新时间：2025-06-02 14:35:56