Twitter bootstrap 引导3断点和媒体查询

上面写着：

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

超小型设备（电话，小于768px）： 由于这是引导中的默认值，因此没有媒体查询

小型设备（平板电脑、768px及以上）：

@media（最小宽度：@screen sm min）{…}

中型设备（台式机、992px及以上）：

@media（最小宽度：@screen-md-min）{…}

大型设备（大型台式机，1200像素及以上）：

@媒体（最小宽度：屏幕最小长度）{…}

我们是否应该能够在媒体查询中使用

@screen sm

、

@screen md

和

@screen lg

名称？因为它对我不起作用。我必须使用像素测量，例如

@media（最小宽度：768px）{…}

，它才能工作。我做错什么了吗

---

另外，对于超小型设备来说，参考480px是否是一个输入错误？不应该说是767px吗？（由于已从文档中删除）

引导无法很好地记录媒体查询。那些

@screen sm

、

@screen md

、

@screen lg

的变量实际上指的是较少的变量，而不是简单的CSS

自定义引导时，您可以更改媒体查询断点，并且在编译@screen xx时，变量将更改为您定义为screen xx的任何像素宽度。这就是这样一个框架可以被编码一次，然后由最终用户定制以满足他们的需求

这里有一个类似的问题，可以提供更清晰的信息：

在CSS中，您仍然必须使用传统的媒体查询来覆盖或添加Bootstrap正在执行的操作

关于你的第二个问题，那不是打字错误。一旦屏幕低于768px，框架就会变得完全流畅，并在任何设备宽度上调整大小，从而消除了断点的需要。存在480px的断点是因为移动优化的布局发生了特定的更改

---

要查看此操作，请转到他们网站（）上的示例，并调整窗口大小，以查看在768px之后如何处理设计。

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

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

在引导程序3中，768px以下没有断点

如果要使用

@screen sm min

和其他混合，则需要使用较少的代码进行编译，请参阅

---

这里有一个关于如何使用Bootstrap 3和更少版本的教程：

这个问题已经在中讨论过了 到目前为止，由于兼容性的原因，还并没有改变网格的计划

您可以从这个分支获得引导，分支

hs

：

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

移动优先设计（XS，小于480px）

在HTML中添加HS（水平小型设备）类：列HS-*，可见HS。。。水平移动设备（HS，小于768px）的设计

平板电脑设备设计（SM，小于992px）

桌面设备设计（MD，小于1200px）

大型设备设计（LG，超过1200像素）

首先设计手机是理解Bootstrap 3的关键。这是BootStrap 2.x的主要变化。作为规则模板，您可以遵循以下步骤（以较少的时间）：

.template{
/*移动垂直（<480）的规则*/
@介质（最小宽度：@screen hs min）{
/*移动水平（480>768）的规则*/
}
@介质（最小宽度：@screen sm min）{
/*平板电脑规则（768>992）*/
}
@介质（最小宽度：@screen-md-min）{
/*桌面规则（992>1200）*/
}
@介质（最小宽度：@屏幕最小长度）{
/*大型（>1200）的规则*/
}
}

Bootstrap 4媒体查询 Bootstrap 4在Sass中提供源CSS，您可以通过Sass mixin将其包括在内：

@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;
  }
}

引导3媒体查询 引导程序2.3.2媒体查询

---

参考资料来源：

我知道这有点陈旧，但我想我会有所贡献。 根据@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) {

}

---

如果用于构建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) {  }

从

事实上，

@screen sm min

是一个变量，当使用较少的值构建时，该变量被

\u variable

中指定的值替换。如果不使用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:。如果您使用的是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) {  }

---

以下是引导4中使用的选择器。BS4中没有“最低”设置，因为默认设置为“超小”。也就是说，您将首先对XS大小进行编码，然后进行这些媒体覆盖

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

---

对于Bootstrap3，我的navbar组件中有以下代码

/**
 * 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”中的任何内容都按原样使用，除了插值外没有任何更改

---

若要查看此操作，请转到他们网站上的此示例，并调整窗口大小，以查看它在768px之后如何处理设计。//这和480px有什么关系？我看不出480像素与500px相比有什么不同。就在Bootstrap 3的可变系统上自然扩展而言，这应该是公认的答案，因为这是一种非常有效的方法。对不起，我不理解这个分叉的附加值。据我所知，您是

@screen hs min:@screen xs。为什么不直接在这里使用
@screen xs
？只是为了更好地理解。此变量为模板提供了视觉一致性。Bootstrap3首先是移动设备，所以媒体查询之外的所有规则都是针对移动设备的大小。然后，如果您需要HS的额外规则，您将在
minwid中记录
/* 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) {  }

/* 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) {  }

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

/**
 * 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 }