如何通过CSS实现响应式分页：桌面端展示8个页码、移动端仅展示4个

AI 小北

2026-10-4

可以仅通过CSS实现该需求，实现方案如下：

核心原理是通过CSS媒体查询匹配移动端视口，配合结构伪类选择器控制多余页码的显隐，不需要修改原有业务逻辑。

具体实现步骤：

确定移动端适配的视口阈值，通用场景下可设置767px作为移动端与桌面端的分界，你可以根据自己的业务需求调整该数值
在媒体查询规则内，选中超出展示数量的页码元素，设置display: none隐藏即可

适配你现有代码的完整CSS示例：

.paginationExample {
  padding: 0 9px;
  margin: 12px 0 0 10px;
  float: left;
  width: 92%;
  text-align: center;
  font-size: 12px;
}
  
a {
  display: inline-table;
  padding: 1px 2px;
  margin: 0 1px;
  color: #000;
}

/* 新增移动端适配代码 */
@media (max-width: 767px) {
  /* 选中第5个及之后的页码链接隐藏，保留当前页+3个后续页码，刚好共4个展示位 */
  .paginationExample a:nth-of-type(n + 5) {
    display: none;
  }

  /* 可选优化：移动端隐藏上一页/下一页的文字，仅保留箭头图标，让分页更紧凑 */
  .activePrevBttn, .disabledPrevBttn, .activeNextLink, .disabledNextLink {
    display: none;
  }
}