您可以使用CSS Media Queries来实现响应式分页器样式。以下是一个简单的例子:
HTML代码:
<div class="pagination">
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
CSS代码:
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination a {
display: inline-block;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #ccc;
color: #333;
text-align: center;
text-decoration: none;
margin: 0 5px;
}
.pagination a:hover {
background-color: #f5f5f5;
}
.pagination a.active {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
@media only screen and (max-width: 768px) {
.pagination {
flex-wrap: wrap;
}
.pagination a {
margin: 5px;
}
}
在上面的代码中,我们使用了flex布局来使分页器居中。在@media查询中,我们设置最大屏幕宽度为768px,当屏幕宽度小于768px时,我们将分页器中的链接元素进行换行,并设置它们之间的间距为5px。
这是一个简单的例子,您可以根据自己的需求进行修改和扩展。