引导媒体查询设计问题答案

【问题标题】：Bootstrap media query design issue引导媒体查询设计问题
【发布时间】：2021-03-09 17:48:44
【问题描述】：

抱歉，这可能是一个非常初级的问题，但我无法理解，

我收到了以下宽度的设计：

S- 320 像素 M - 768 像素 L - 992 像素 XL - 1920 像素

但他们使用的媒体查询如下：

@media (min-width: 576px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)

我不确定如何将设计与媒体查询相匹配，我是否遗漏了一些超级简单明了的东西？

如果是这样，我道歉！

非常感谢，

【问题讨论】：

标签： css bootstrap-4 media-queries

【解决方案1】：

我建议使用某种 css 预编译器，例如 sass。

https://getbootstrap.com/docs/4.0/getting-started/theming/

如果您覆盖 variables.scss 文件的变量，您可以更改引导程序“主题”的配置。我的情况是：

$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

【讨论】：

【解决方案2】：

有很多方法（比如 bootstrap 是你的朋友），但根据你提到的媒体查询，你可以在你的 css 中使用它们：


# All your generic CSS here...

# Custom width CSS follows:
@media only screen and (min-width: 992px) {
  .class {
    color:#000
  }
}
@media only screen and (min-width: 1200px) {
  .class {
    color:#fff
  }
}

etc

在这个简单的例子中，.class 的颜色为 #000，宽度大于 992 像素，颜色为 #fff，宽度大于 1200 像素。

由于 1200px 媒体查询在 992px 媒体查询之后，它会取代它。

也可以使用max-width，如：

@media only screen and (max-width: 768px) {
# your CSS here
}

如果您只想在较小的屏幕上自定义 CSS，这很有用，这在您为手机等有“不同”设计时很常见。

并且还做一个范围，例如：

@media only screen and (min-width: 1024px) and (max-width: 1150px) {
# your CSS here
}

【讨论】：