Question

我正在开发Woocommerce Storefront的儿童主题。

在平板电脑上（肖像，宽768像素），我想要＆＃34;手机＆＃34;要显示的布局（汉堡菜单等），而不是桌面布局（主菜单等）。

我使用了以下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中的断点值，并使用店面中的grunt文件重新编译所有Storefront文件（包括sass文件）。只需运行$ grunt。

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

1 个答案: