Php 根据屏幕大小更改每行产品的数量

我想更改每行（类别页面）的产品数量，具体取决于屏幕大小

jQuery(window).resize(function(){
   var width = jQuery(window).width();

   if(width >= 1000 && width <= 1200){
     jQuery('.sentry-product').removeClass('columns-4').addClass('columns-3');
     }
   else{
     jQuery('.sentry-product').removeClass('columns-3').addClass('columns-4');
     }
})
.resize();

jQuery（窗口）.调整大小（函数（）{
var width=jQuery（window）.width（）；
如果（width>=1000&&width这是如何使用三列，在600px或更小的视口中减少为两列

@media screen and (max-width: 600px) {

.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product {
   width: 45%; /* was 30.75% */
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
  width: 45%; /* for category pages */
}

.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
  clear: none; /* was both */
}

.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
  margin-right:3.8%; /* was 0 */
}

显然，您必须调整不同的列数或断点数。我将为480px编写另一个集，这样我就可以在手机上每行有一个产品。此CSS在woo commerce的CSS之后出现（或使用
！important
）
如果可以的话，可以使用媒体查询，并隐藏不想看到的额外产品。我对CSS没有问题，我想更改PHP…如果你想在用户调整屏幕大小时更改产品数量，你需要ajax来获得你想要的产品数量并将其放入页面中。不要试图解决显示问题服务器端。通过所有产品（一页）让CSS根据设备宽度处理正确的宽度。我建议您查看flexbox和/或媒体查询。事实上，php决定列可能是CRM为无法编写代码的人提供选项的原因。我的问题是我无法阻止Woocommerce页面的默认行为，是否可以“解决服务器端的显示问题”，我无法控制CSS中一行产品的数量…就我个人而言，在这个时代，我认为使用.last和.first（或伪等价物）有点困难。而且，你不需要任何Javascript。这一切都与woo commerce的默认输出一起工作。
@media screen and (max-width: 600px) {

.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product {
   width: 45%; /* was 30.75% */
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
  width: 45%; /* for category pages */
}

.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
  clear: none; /* was both */
}

.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
  margin-right:3.8%; /* was 0 */
}