更改 FXFlex 断点值

Change FXFlex breakpoint values

是否可以在不定义自定义断点提供程序的情况下更改和使用 FxFlex 默认断点值?

我想更改别名 sm 和 md 的断点媒体查询。来自

sm  'screen and (min-width: 600px) and (max-width: 959px)'
md  'screen and (min-width: 960px) and (max-width: 1279px)'

类似于

sm  'screen and (min-width: 600px) and (max-width: 900px)'
md  'screen and (min-width: 900px) and (max-width: 1279px)

node_modules/@angular/flex-layout/__ivy_ngcc__\esm2015中有一个名为'core.js'的文件,在那个文件中有一个名为'DEFAULT_BREAKPOINTS'的常量,在这个常量中定义了默认断点,你可以改变他的值,但是我不知道这样做是否安全,我假设你每次更新包时都必须更改它。

文件中也有相同的 const(或在某些情况下为 var):

node_modules/@angular/flex-layout/esm2015/core.js
node_modules/@angular/flex-layout/esm5/core.es5.js
node_modules/@angular/flex-layout/bundles/flex-layout-core.umd.js

请注意,每个文件都有自己的引用断点变量的映射,您可能需要更改您更改的文件的映射

希望对您有所帮助

是的,这是可能的。 例如,要将 XL 断点从 1920px 更改为 1600px,请将此代码添加到您的 app.module.ts :

import { DEFAULT_BREAKPOINTS } from "@angular/flex-layout";

DEFAULT_BREAKPOINTS.find(item => item.alias == "lg").mediaQuery = "screen and (min-width: 1280px) and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "xl").mediaQuery = "screen and (min-width: 1600px) and (max-width: 4999.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "lt-xl").mediaQuery = "screen and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "gt-lg").mediaQuery = "screen and (min-width: 1600px)";