Question

我会有一些页面，我必须对它们进行分页。

小型设备上的

（仅显示2个页码）： -

<<  <  1 | 2  >  >>

中型及以上设备上的

（显示所有页码）：

<<  <  1 | 2 | 3 | 4  >  >>

我能够在中型到大型屏幕上显示所有页码，但要求是在小屏幕设备上一次只显示2个页码。请告知如何处理这种响应式设计，如何隐藏其他数字，并在小屏幕上一次只显示2个？

https://jsfiddle.net/3rvm34a7/

Answer 1

有两种方法可以实现这一点：

<强> 1。服务方面：

如果您使用的是php或python等，则可以从服务器检测HTTP用户代理。因此，您可以将分页html发送到视图。

<强> 2。客户方：

A）您可以从javascript检测设备宽度或设备代理。然后，如果设备较小，则隐藏较大的分页，反之亦然。链接：What is the best way to detect a mobile device in jQuery?

b）使用Css：您可以将课程应用于第3,4页的链接。使用媒体查询使用简单的css在较小的分辨率上隐藏这些页面。但是，当我单击页面时，请确保您按顺序更新页面类并动态更新分页HTML。链接：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

这是一种用于将页面隐藏在较小设备上的CSS解决方案并为更大的设备显示它们JSfiddle 在将平板电脑/手机旋转到横向时，它还会显示和隐藏其他页面。

您可以调整小提琴窗口的大小以查看其工作原理。

Answer 3

我在这里更新了你的jsfiddle： https://jsfiddle.net/3rvm34a7/1/

我添加了一个＆＃34; pg＆＃34;类名到列表页码并添加以下代码。

if(screen.width < 500){
  var list = document.getElementsByClassName("pg");
  for(var i = 2; i < list.length; i++){
     list[i].style.display = 'none';
  }
}

分页：如何限制小屏幕设备上的页数

3 个答案: