用 display: flex + gap + 媒体查询实现真响应式分页：flex 更适合独立区块居中，gap 避免首尾空白，禁用态需 pointer-events: none 与视觉降级，aria-current="page" 必须写在 上，省略号加 aria-hidden="true"，小屏用 display: none 隐藏非关键页码，圆角需首尾差异化处理以形成视觉闭合。
直接用 display: flex + gap + 媒体查询就能搞定，不需要 JavaScript 参与布局；但圆角、省略号语义、禁用态交互这些细节不处理好，用户一眼就能看出是“假响应式”。
为什么 flex 比 inline-flex 更适合常规分页容器
多数分页条是独立区块（比如放在列表下方），需要独占一行并水平居中——display: flex 天然支持 justify-content: center，且子项默认不换行；而 inline-flex 会受父容器文本对齐影响，还得额外加 margin: 0 auto 才能居中，容易在 <p></p> 或卡片内意外撑宽或跳行。
- 若你把分页塞进段落旁（如「共 120 条 ·
<nav class="pagination"></nav>」），才考虑inline-flex；否则一律用flex -
gap必须用，别用margin：它只作用于 item 之间，不会在首尾多出空白，避免“左边空一格、右边空一格”的错位感 - 禁用项（如第一页时的“上一页”）必须同时加
pointer-events: none和视觉降级，否则键盘 Tab 仍会停在上面
aria-current="page" 不加等于放弃无障碍访问
仅靠 .active 类高亮当前页，屏幕阅读器完全感知不到“这是当前页”。WCAG 要求必须用 aria-current="page" 显式声明语义，且该属性必须写在 @#@#@#@#@#@#@#@#@#@0
<li>@#@#@#@#@#@#@#@#@#@1</li>
<span aria-hidden="true">…</span> 也得加 aria-hidden="true"，否则读屏软件会把它念成“点点点”小屏下隐藏中间页码，不是靠 flex-wrap 换行
flex-wrap: wrap 在窄屏下会让页码堆成两行甚至三行，破坏导航连续性。真正可靠的响应式策略是用媒体查询 + display: none 动态控制可见项，保留首、尾、当前页和上下页这五个关键节点。
- @media (max-width: 768px) { .pagination li:not(:first-child):not(:last-child):not(.prev):not(.next):not(.current) { display: none; } }
- 省略号必须是独立
<li>，且设pointer-events: none+border-radius: 0，否则看起来像按钮、焦点还能停住 - 小屏圆角建议用
border-radius: 0.25rem（而非固定4px），随根字体缩放更自然
圆角连贯性比统一值更重要
所有页码按钮都设 border-radius: 4px，结果是一串分离的胶囊——用户看不出这是“一条导航”，而是“一堆按钮”。首尾圆角必须差异化处理，才能形成视觉闭合感。
- 首项左圆角右直角：
.pagination a:first-child { border-radius: 4px 0 0 4px; } - 末项右圆角左直角：
.pagination a:last-child { border-radius: 0 4px 4px 0; } - 中间项全直角：
.pagination a:not(:first-child):not(:last-child) { border-radius: 0; } - 禁用态按钮（
:disabled）圆角必须和正常态一致，否则视觉割裂；不要只改背景色
最易被忽略的是省略号的语义隔离和禁用项的交互阻断——它们不参与跳转，但若没做 pointer-events: none 和 aria-hidden="true"，就等于在可访问性和键盘导航上留了硬伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
