基于屏幕尺寸的产品清单UI

Question

我正在使用magento（html，php，js），并希望设计产品列表页面以根据屏幕大小进行更改。目前的设计是响应式的，但是，我需要在大屏幕中使用卡片，而在小屏幕中使用的卡片与卡片完全不同。产品是数组/集合，我有一个for循环来显示产品属性。我正在寻找除css媒体查询之外的其他内容，例如

如果屏幕很小 //显示列表 其他 //使用卡

在php中是否有检测屏幕大小的方法？使用它是一种好习惯吗？如果浏览器视图调整大小怎么办

Answer 1

您尝试做的只能通过 javascript 或 css 来实现。 PHP是一种服务器端语言，在到达客户端之前编译。这意味着PHP脚本在不使用HTTP协议的情况下不知道有关客户端计算机/浏览器的任何。

此方案最实用的解决方案是使用媒体查询，因为它们是浏览器中最受支持的。实际上，它们使用起来非常简单。在下面的示例中，打开整页的代码段，调整窗口大小，并观察两个框如何响应屏幕大小：

/* Standard Appearace */

.box {
  display: inline-block;
  width: 49%;
}


/* Mobile Appearance */

@media only screen and (max-width: 700px) {
  .box {
    display: block;
    width: 100%;
  }
}




/* Ignore: Irrelevant CSS */

.box {
  height: 50px;
  color: white;
}

.box:first-child {
  background-color: red;
}
.box:nth-child(2) {
  background-color: blue;
}

<div class="box">Box 1</div>
<div class="box">Box 2</div>

如果确实希望远离媒体查询，您可以使用window.availWidth来获取窗口的宽度，从中可以编写if语句以进行调整你的内容。