覆盖Magento2中的默认断点

Question

我想覆盖magento2 css中的默认断点。提出任何想法如何做到这一点？

E.g。在magento2默认断点是

@screen__xxs: 320px;

@screen__xs: 480px;

@screen__s: 640px;

@screen__m: 768px;

@screen__l: 1024px;

@screen__xl: 1440px;

我想通过

覆盖它们

@screen__xxs: 320px;

@screen__xs: 479px;

@screen__s: 767px;

@screen__m: 991px;

@screen__l: 1440px;

@screen__xl: 2150px;

在Devdocs magento上，我找到了添加新方法但未能覆盖现有alls的方法。

Answer 1

在您的主题中，在以下目录结构下创建一个文件：
<Namespace>/<Theme>/web/css/source/lib/variables/_responsive.less
现在添加自定义变量：

@screen__xxs: 320px;

@screen__xs: 479px;

@screen__s: 767px;

@screen__m: 991px;

@screen__l: 1440px;

@screen__xl: 2150px;

此文件将覆盖默认的magento变量。因此，您将拥有自定义断点。在部署时，将创建目录：
pub/static/frontend/<Namespace>/<ThemeName>/en_US/css/source/lib/variables/_responsive.less
您会看到默认断点被覆盖。