最可靠的响应式页码器方案是用@media配合display: none隐藏冗余页码；保留当前页、前后1–2页及首末页，中间页统一加.page-omit类并批量隐藏，省略号需设固定宽高防布局跳动。
小屏下页码太多，直接用 @media 配合 display: none 最可靠
响应式页码器在手机上显示 10 个数字按钮会挤满屏幕，用户点不准、布局易崩。最直接的解法不是 JS 动态删 DOM，而是 CSS 媒体查询控制显隐——display: none 让元素彻底退出布局流，不占位、不触发重排，性能和语义都干净。
关键不是“怎么隐藏”，而是“谁该被隐藏”。通常保留：当前页、前 1–2 页、后 1–2 页，以及首页/末页；中间冗余页码（如第 4–8 页）统一加 .page-dots 或 .page-omit 类，再用媒体查询批量隐藏。
- 别用
visibility: hidden或opacity: 0替代——它们仍占位，可能让按钮错位或键盘焦点卡住 - 隐藏目标要精准：用
.pagination .page-num:not(.current):not(.near-current)比单纯.page-num更安全，避免误杀关键项 - 断点选
max-width: 480px而非768px，因页码拥挤问题在小屏竖屏（iPhone SE 等）就已明显
.page-dots 必须设固定宽高，否则隐藏/显示时布局会跳动
省略号按钮（如 …）常被实现为纯文本或伪元素，但一旦在媒体查询中反复切换 display: none，它前后两个页码的间距会突变——因为 Grid/Flex 的 gap 是按“可见子项”计算的。
解决方法是给 .page-dots 显式声明尺寸，让它始终占据空间：
.page-dots {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
@media (max-width: 480px) {
.page-dots { display: none; }
}
- 宽度必须和相邻页码按钮一致（如都是
36px），否则隐藏后左右页码会突然“撞一起” - 不要用
min-width或flex: 0 0 auto代替固定宽高，它们无法阻止 gap 收缩 - 如果用伪元素生成
…，记得同时给::before设content和尺寸，否则display: none对伪元素无效
Grid 布局下隐藏页码，无需额外处理父容器
当页码器用 display: grid 实现（如 grid-template-columns: repeat(auto-fit, minmax(36px, 1fr))），子项设 display: none 后会自动从网格轨道中剔除，剩余页码仍能均匀分布，不用手动调整 grid-column 或重写模板。
- 旧版 IE 不支持
auto-fit，若需兼容，改用repeat(5, 1fr)+@media控制列数更稳 - 避免对隐藏项用
visibility: hidden再配grid-column: span 2——它仍参与网格定位，容易撑开列宽 - 当前页高亮样式（如
.current { justify-self: stretch; }）不受隐藏影响，可照常生效
隐藏后键盘导航断裂？检查 tabindex 和语义结构
用 display: none 隐藏页码，也会让屏幕阅读器跳过、键盘 Tab 键无法聚焦——这本身是正确行为。但如果用户已在某页码上聚焦，再切到小屏，焦点可能“悬空”或跳转异常。
- 每个页码必须是
<button></button>或带role="button"的元素，不能只用<span></span> - 隐藏前确保当前页按钮仍有
tabindex="0"，且未被其他逻辑移除 - 不要依赖 JS 在隐藏后手动
focus()到新按钮——CSS 隐藏是异步的，时机难控；改用 CSS:focus-visible+outline保证视觉反馈连贯
.page-num:nth-child(n+4):nth-child(-n+8) 规则，新追加的页码不会被覆盖。真要稳健，还是得靠类名标记（如 .page-omit）而非位置选择器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
