目前，在我的网站主页上，我使用woocommerce短代码显示特定类别的产品，并选择在桌面上显示5种与屏幕宽度非常匹配的产品。。。
然而，在移动设备上，短代码也会导致显示5种看起来很凌乱的产品。
我想知道是否有办法改变短代码，使其在桌面上显示5个，但在移动设备上仅显示2个产品？
我曾尝试将所有5款产品排成一行，隐藏溢出，但根据手机屏幕的宽度，有时会显示一些第三款产品，看起来不太专业。
我的短代码的形式如下：
[products limit="5" columns="5" visibility="featured" ]
在主屏幕上显示特色产品我还展示了销售产品以及一些不同类别的产品，所有这些产品都使用了类似的短代码。
最合适的回答,由SO网友:Pekka 整理而成
想到的一个简单方法是通过CSS使用nth-child 选择器。
这样，所有五个元素仍在源代码中呈现，但只有其中两个元素在低于特定分辨率的设备上可见。
假设产品项是类的元素的示例代码item 在包含类的容器中products:
@media (max-width: 480px) /* replace with whatever mobile threshold the rest of your
CSS is using */
{
.products .item { display: none } /* Hide all elements by default */
.products .item:nth-child(1), /* Selectively re-enable 1st and 2nd element */
.products .item:nth-child(2)
{
display: block; /* Or whatever the elements\' original display value is */
}
}
您可以扩展此代码（使用
min-width 和
max-width) 也可以调整非常窄和非常大屏幕的项目数量。
