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

Question

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

在平板电脑（纵向，768 像素宽）上，我希望显示 "mobile" 布局（汉堡菜单等），而不是桌面布局（主菜单等）。

我使用了以下 css 媒体查询： @media (max-width: 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 中的断点值，并使用店面中的 g运行t 文件重新编译所有店面文件（包括 sass 文件）。就运行 $ grunt.

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

Storefront: switch to mobile layout for 768px-wide screens

css

storefront

woocommerce