css - 店面:切换到 768 像素宽屏幕的移动布局

Question

我正在开发 Woocommerce Storefront 的子主题。

在平板电脑(纵向，768 像素宽)上，我希望显示“移动”布局(汉堡菜单等)，而不是桌面布局(主菜单等)。

我使用了以下 CSS 媒体查询:@media(最大宽度:768px) 用于移动设备@media (min-width: 769px) 用于桌面在我的 CSS 文件中。

但是店面的所有媒体查询似乎都激活了 @media (min-width: 768px) 的桌面布局。

我怎样才能改变这个断点？

编辑 1: 我尝试将文件 wp-content/themes/storefront/assets/sass/utils/_variables.scss 编辑为

$desktop:           769px;
$handheld:          768px;

但它不会改变布局。

编辑 2: 我在 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 = '769px';
  return $px;
}

但它也不起作用。

Answer 1

我更改了/storefront/assets/sass/utils/_variables.scss 中的断点值，并使用店面中的 grunt 文件重新编译所有店面文件(包括 sass 文件)。只需运行 $ grunt。