Question

我为网站设计了响应式设计，以便在桌面设备或移动设备上正确显示。我的应用程序是一种视频库。（我使用大火，如果相关的话。）

但是我想更改桌面（约9个）和移动设备（可能是3个）中的预览数量，因为桌面上的全屏不同于移动设备中的全屏。

我知道如何通过使用CSS隐藏/显示不同视口上的不同布局来显示一些内容。但是，我试图限制应用下载的数据，而不是显示的数据。

我想我可以通过过滤我的收藏来实现这一点，但是如何识别客户端设备/视口？

Answer 1

您是否考虑过使用@media查询在CSS中构建逻辑？这将基于视口而不是设备来操纵页面显示，尽管这通常是您想要的，并且它将需要更少的维护。

有很多方法可以做到这一点。下面是一个示例，您可以使用class="show-mobile"标记要在移动设备上显示的块。然后，当视口超过767px时，您有一个媒体查询来隐藏所有没有此类的块。

https://codepen.io/panchroma/pen/aWBXXM

希望这有帮助！

HTML

<ul>
    <li class="show-mobile">one</li>
    <li class="show-mobile">two</li>
    <li class="show-mobile">three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
 </ul>

CSS

@media (max-width: 767px) {
  li{display:none;}
  li.show-mobile{display:inline-block;}
}

如何根据设备类型/尺寸显示更少或更多的图像？

1 个答案: