覆盖CSS媒体查询

Question

我有一个正在使用的库，只要屏幕到达col-xxl-*，即1600px，它就会应用@media (min-width: 1600px)（其中*是数字）样式。

是否有一种方法（不分叉库）来更改此内容，因此col-xxl-*从2000px？

也许有用-该库正在将.less与变量一起使用

Answer 1

您很少提到变量。您的媒体查询将在1600开始应用，这意味着必须有一个配置为

定义了变量

"xxl" : 1600px

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

Variables.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
);

app.scss：

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

Answer 2

这可能是适合您的工作 只是您必须使用！important关键字在此媒体查询中覆盖，这并不正确，但您使用的是库文件，因为我们无法覆盖，如果我们覆盖.less则无法使用，因此只有使用！important的方法媒体查询@media中的关键字（最小宽度：2000像素）