更改 Woocommerce 媒体查询断点以在 max-width: 767px 而不是 768px 处加载 woocommerce-smallscreen.css [英] Change Woocommerce media query breakpoint to load woocommerce-smallscreen.css at max-width: 767px instead of 768px

问题描述

Woocommerce 以最大宽度 768 像素加载 woocommerce-smallscreen.css.如何将其更改为 767px?我使用这个 css 文件，所以我希望它被加载，但也以某种方式改变了这个媒体查询断点.

Woocommerce load woocommerce-smallscreen.css at max-width 768px. How can I change it to 767px? I use this css file so I want it to be loaded but also change somehow this media query breakpoint.

我在 woocommerce css 文件中搜索了这个媒体查询，但没有找到我在 chrome devtools 中看到的这个短语:media="only screen and (max-width: 768px)"

I searched for this media query in woocommerce css files but I didn't find this phrase which I see in chrome devtools: media="only screen and (max-width: 768px)"

推荐答案

在 functions.php 中添加这个 Woocommerce 过滤器.

Add this Woocommerce filter in functions.php.

// Change Woocommerce css breaktpoint from max width: 768px to 767px  
add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');

function woo_custom_breakpoint($px) {
  $px = '767px';
  return $px;
}

这篇关于更改 Woocommerce 媒体查询断点以在 max-width: 767px 而不是 768px 处加载 woocommerce-smallscreen.css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！