店面:切换到768像素宽的屏幕的移动版式 [英] Storefront: switch to mobile layout for 768px-wide screens

问题描述

我正在开发Woocommerce店面的子主题.

I am developping a child theme of Woocommerce Storefront.

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

On a tablet (portrait, 768px wide), I would like the "mobile" layout (burger menu, etc) to be displayed, instead of the the desktop layout (main-menu, etc).

我使用了以下CSS媒体查询: @media (max-width: 768px)移动版 @media (min-width: 769px)用于台式机 在我的css文件中.

I used the following css media queries: @media (max-width: 768px) for mobile @media (min-width: 769px) for desktop in my css file.

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

But all the media queries of storefront seem to activated desktop layout for @media (min-width: 768px).

如何更改此断点?

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

EDIT 1: I tried to edit the file wp-content/themes/storefront/assets/sass/utils/_variables.scss to

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

但它不会更改布局.

我在functions.php中尝试过

EDIT 2: I tried this in the 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;
}

但它也不起作用.

推荐答案

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

I changed the breakpoint value in /storefront/assets/sass/utils/_variables.scss and recompile all Storefront files (including sass files) using the grunt file in storefront. Just run $ grunt.

这篇关于店面:切换到768像素宽的屏幕的移动版式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！