css - 覆盖 Magento2 中的默认断点

Question

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

例如在 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 上，我找到了添加新内容但无法覆盖现有所有内容的方法。

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
您会看到默认断点被覆盖。