移动端日历组件在小屏下需按内容临界点重构布局：480px隐藏周标题，420px切单列滚动，360px调字体并保min-height:44px；须设viewport、box-sizing:border-box，用aspect-ratio和rem适配，禁用transform缩放。
移动端日历组件在小屏（如 375px–420px 宽）下容易出现单元格文字重叠、点击区域过小、日期错位等问题，根本原因不是“日历没写好”，而是默认样式未针对内容临界点做结构降级。媒体查询在这里的作用不是微调间距，而是触发布局重构——比如从 7×1 网格切换为单列滚动、隐藏周标题、压缩字体但保障最小可触控尺寸。
先确保视口和基础可访问性前提
如果日历在手机上文字极小、无法点击，大概率是 <meta name="viewport"> 缺失或配置错误：
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，放在中 - 禁用缩放（
user-scalable=no）会破坏可访问性，也影响媒体查询断点判断，不建议加 - 日历容器本身需设
box-sizing: border-box，避免 padding 撑破单元格宽度
按内容临界点设置断点，而非设备型号
不要照搬 iPhone 屏幕宽度（如 375px），而要观察日历何时开始“难用”：
-
@media (max-width: 480px)：周标题文字开始折行，或星期缩写（如“Th”）被截断 → 隐藏.week-header，改用顶部固定栏显示当前月份 -
@media (max-width: 420px)：日期单元格宽度＜44px，点击易误触 → 切换为垂直堆叠布局，每行只显示 1 天，支持上下滑动翻月 -
@media (max-width: 360px)：字体再小就不可读 → 改用rem基准，配合媒体查询动态调小html的font-size，但保证单元格min-height: 44px
日历单元格的弹性适配策略
纯用 px 固定宽高在小屏必然失效。推荐组合方案：
- 单元格宽高用
aspect-ratio: 1 / 1或padding-bottom: 100%保持正方形，内部用display: flex; align-items: center; justify-content: center - 字号统一用
rem，例如font-size: 0.875rem，并在@media (max-width: 420px)中设为0.75rem - 关键交互区加
min-width: 44px; min-height: 44px（苹果人机指南推荐最小触控尺寸） - 对“今天”“选中态”等状态使用
outline或box-shadow替代边框，避免因缩放导致边框模糊或溢出
必要时用结构替换代替样式覆盖
当屏幕窄到连单列日历都拥挤时，媒体查询应触发 DOM 层面调整：
- 用
display: none隐藏原日历网格，显示简化版<select></select>月/年切换 + 滚动日期列表 - 或借助 JS 监听
resize或orientationchange，在max-width: 320px时动态渲染精简日历（仅显示当前周+上下各一天） - 避免用
transform: scale()压缩整个日历——它不改变实际布局占位，会导致点击偏移
