@media only screen和(max-width: 1200px) {} @media only screen (max-width: 979px) {} @media only screen (max-width: 767px) {} @media only screen和(max-width: 480px) {} @media only screen and (max-width: 320px) {} @media (min-width: 768px) and (max-width: 991px) {} @media (min-width: 992px) and (max-width: 1024px) {}

这些是Bootstrap3的值:

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}

基于bisio的答案和Bootstrap 3代码，我能够为那些只想复制并粘贴完整媒体查询集到样式表的人提供一个更准确的答案:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

这里有两个例子。

一旦视口变成700px宽或更小，使所有h1标签20px。

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

使所有h1的20px，直到视口达到700px或更大。

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

希望这能有所帮助:

:)

在最新的bootstrap(4.3.1)中，使用SCSS(SASS)，您可以使用来自/bootstrap/ SCSS /mixins/_breakpoints.scss的@mixin之一

至少是最小断点宽度的媒体。不查询最小的断点。 使@content应用于给定的断点并更广泛。

@mixin media-breakpoint-up($name， $breakpoints: $grid-breakpoints)

最多为最大断点宽度的媒体。不查询最大的断点。 使@content应用于给定的断点并变窄。

@mixin media-breakpoint-down($name， $breakpoints: $grid-breakpoints)

跨越多个断点宽度的媒体。 使@content应用于最小断点和最大断点之间

@mixin media-breakpoint-between($lower， $upper， $breakpoints: $grid-breakpoints)

断点的最小宽度和最大宽度之间的媒体。 最小的断点没有最小值，最大的断点没有最大值。 使@content仅应用于给定的断点，而不扩大或缩小视口。

@mixin media-breakpoint-only($name， $breakpoints: $grid-breakpoints)

例如:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

文档:

介绍https://getbootstrap.com/docs/4.3/layout/overview/ responsive-breakpoints 迁移https://getbootstrap.com/docs/4.3/migration/ responsive-utilities 变量https://getbootstrap.com/docs/4.3/layout/grid/变量

快乐编码;)

根据其他用户的回答，我编写了这些自定义mixin，以便于使用:

减少输入

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

示例使用

body {
  .when-lg({
    background-color: red;
  });
}

SCSS输入

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

使用示例:

body {
  @include when-md {
    background-color: red;
  }
}

输出

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}