在Bootstrap 3媒体查询文档中，该文档显示：

我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。

超小型设备（电话，小于768px）：无媒体查询，因为这是Bootstrap中的默认设置

小型设备（平板电脑，768像素及以上）： @media (min-width: @screen-sm-min) { ... }

中型设备（台式机，992px及以上）： @media (min-width: @screen-md-min) { ... }

大型设备（大型台式机，1200px及以上）： @media (min-width: @screen-lg-min) { ... }

难道我们应该能够使用@screen-sm，@screen-md以及@screen-lg在我们的媒体查询的名字呢？因为它对我不起作用。我必须先使用像素测量，@media (min-width: 768px) {...}然后才能使用。难道我做错了什么？

另外，对于超小型设备的480px的引用是否是错字？那不应该说到767px吗？（因为已从文档中删除）

Bootstrap 4媒体查询

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4在Sass中提供了源CSS，您可以通过Sass Mixins将其包括在内：

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Bootstrap 3媒体查询

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Bootstrap 2.3.2媒体查询

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

资源来自：https : //scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap不能很好地记录媒体查询。这些变量@screen-sm，@screen-md，@screen-lg实际上指的是LESS变量，而不是简单的CSS。

当您自定义Bootstrap时，您可以更改媒体查询断点，并且当它编译时，@ screen-xx变量将更改为您定义为screen-xx的任何像素宽度。这样，这样的框架就可以编码一次，然后由最终用户定制以适应他们的需求。

此处的类似问题可能更清楚：Bootstrap 3.0媒体查询

在CSS中，您仍然必须使用传统的媒体查询来覆盖或添加Bootstrap的功能。

关于第二个问题，那不是错字。一旦屏幕低于768像素，框架将变得完全流畅，并可以在任何设备宽度下调整大小，从而无需断点。之所以存在480px的断点，是因为布局进行了一些特定的更改以进行移动优化。

要查看实际效果，请转到其网站上的示例（http://getbootstrap.com/examples/navbar-fixed-top/），并调整窗口大小以查看在768px后如何处理设计。

https://github.com/twbs/bootstrap/issues/10203中已经讨论了此问题 。由于兼容性原因，目前尚无计划更改Grid。

您可以从此fork分支获取Bootstrap hs：https : //github.com/antespi/bootstrap/tree/hs

该分支为您提供了480px的额外断点，因此您必须：

1. 移动优先设计（XS，小于480px）
2. 在HTML中添加HS（水平小型设备）类：col-hs- *，visible-hs ... ...并为水平移动设备设计（HS，小于768px）
3. 平板电脑设备的设计（SM，小于992px）
4. 专为台式设备设计（MD，小于1200px）
5. 适用于大型设备（LG，大于1200像素）的设计

首先设计移动设备是理解Bootstrap 3的关键。这是BootStrap 2.x的主要变化。作为规则模板，您可以按照以下步骤操作（在LESS中）：

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}

我知道这有点老，但我想我会贡献力量。基于@Sophy的答案，这就是我添加.xxs断点的方法。我没有处理visible-inline，table.visible等类。

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

对480px的引用已删除。相反，它说：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Bootstrap 3中的768px以下没有断点。

如果要使用@screen-sm-min和其他mixin，则需要使用LESS进行编译，请参见http://getbootstrap.com/css/#grid-less

这是有关如何使用Bootstrap 3和LESS的教程：http : //www.helloerik.com/bootstrap-3-less-workflow-tutorial

如果使用http://lesscss.org/构建CSS，则应该能够使用这些断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

从https://getbootstrap.com/docs/3.4/css/#grid-media-queries

实际上@screen-sm-min，一个变量比_variable用Less构建时指定的值替换。如果不使用Less，则可以用以下值替换此变量：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3正式支持Sass：https : //github.com/twbs/bootstrap-sass。如果您正在使用Sass（并且应该使用），语法会有所不同。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }

这是在Bootstrap 4中使用的选择器。BS4中没有“最低”设置，因为默认情况是“极小”。即，您首先要编码XS大小，然后再覆盖这些媒体。

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

当我使用@media（max-width：768px）时，我的设计中断了768px。但是在767px和769px上都可以。因此，我认为针对小型设备的最大宽度将为767px。

对于bootstrap 3，我的导航栏组件中具有以下代码

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

然后您可以使用类似

@media wide { selector: style }

这将使用您将变量设置为的任何值。

转义允许您将任意字符串用作属性或变量值。〜“ anything”或〜'anything'内的任何内容均按原样使用，除插值外没有其他更改。

http://lesscss.org

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}