css - 覆盖 CSS 媒体查询

Question

我有一个正在使用的库，它在屏幕达到 1600px 时应用 col-xxl-*(其中 * 是一个数字)样式，即 @media(最小宽度:1600px)。

有没有办法(不 fork 库)来改变这个东西，所以 col-xxl-* 从例如2000px?

可能有帮助 - 这个库正在使用 .less 和变量

Answer 1

您已经提到 less 变量。您的媒体查询在 1600 开始应用，这意味着必须有一个配置，其中定义了变量

"xxl" : 1600px

在包含库路径之前，您需要修改这些变量并将其包含在 less/scss 文件中。检查以下代码:

变量.scss

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px,
  xxl: 2000px
);

应用程序.scss:

@import "variables";
@import "{{librarypath}}";