在http://getbootstrap.com/css/上它说：

我们使用以下媒体查询在网格系统中创建关键断点 . 超小型设备（手机，最高480px）：无媒体查询，因为这是Bootstrap小型设备（平板电脑，768px及更高版本）的默认设置：@media（最小宽度：@ screen-sm）中型设备（桌面，992px及以上）：@ media（min-width：@ screen-md）大型设备（大型桌面，1200px及以上）：@ media（min-width：@ screen-lg）{ . ..}

我们是否应该能够在我们的媒体查询中使用@ screen-sm，@ screen-md和@ screen-lg名称？因为它对我不起作用 . 在它工作之前，我必须使用像@media（min-width：768px）这样的像素测量 . 难道我做错了什么？

另外，对于超小型设备而言，480px的参考是错字吗？不应该说高达767px？

10 回答

138

@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) {



}

回复于 2024-04-25T17:16:23+08:00

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

回复于 2024-04-25T17:16:23+08:00

0

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

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

这里的类似问题可能会更清晰：Bootstrap 3.0 Media queries

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

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

要查看此操作，请在其站点（http://getbootstrap.com/examples/navbar-fixed-top/）上转到此示例，并调整窗口大小以查看它在768px之后如何处理设计 .

回复于 2024-04-25T17:16:23+08:00
23
此问题已在https://github.com/twbs/bootstrap/issues/10203中讨论过 . 到目前为止，由于兼容性原因，没有计划更改Grid .

你可以从这个fork获得Bootstrap，分支hs：https://github.com/Teachnova/bootstrap/tree/hs

这个分支给你一个480px的额外断点，所以你必须：
- 首先设计移动设备（XS，小于480px）
- 在HTML中添加HS（水平小设备）类：col-hs- *，visible-hs，...和水平移动设备的设计（HS，小于768px）
- 平板电脑设备设计（SM，小于992px）
- 桌面设备设计（MD，小于1200px）
- 大型设备设计（LG，超过1200px）
首先设计移动是了解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) */
    }
}
```
回复于 2024-04-25T17:16:23+08:00

我知道这有点老了，但我想我会做出贡献 . 基于@Sophy的回答，这就是我添加.xxs断点所做的 . 我没有处理可见内联，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) {

}

回复于 2024-04-25T17:16:23+08:00

2
已删除对480px的引用 . 相反它说：
```
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
```
Bootstrap 3中没有低于768px的断点 .

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

这是一个关于如何使用Bootstrap 3和LESS的教程：http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
回复于 2024-04-25T17:16:23+08:00

如果使用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) {  }

来自http://getbootstrap.com/css/#grid-media-queries

事实上，@ screen-sm-min是一个变量，而不是在使用less构建时由_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 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) {  }

回复于 2024-04-25T17:16:23+08:00

7
以下是Bootstrap 4中使用的选择器.BS4中没有“最低”设置，因为“超小”是默认设置 . 即您将首先编码XS大小，然后将这些媒体覆盖 .
```
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
```
回复于 2024-04-25T17:16:23+08:00
-6

当我使用@media（最大宽度：768px）时，我的设计打破了768px . 但它在767px和769px上都可以 . 因此，我认为针对小型设备的最大宽度为767px .

回复于 2024-04-25T17:16:23+08:00
1

如果你使用LESS你可以使用这两个额外的断点（测试！）：https://github.com/brgrz/bootstrap-breakpoints

HTH

回复于 2024-04-25T17:16:23+08:00

Bootstrap 3断点和媒体查询

10 回答

Bootstrap 4媒体查询

Bootstrap 3媒体查询

Bootstrap 2.3.2媒体查询

相关问题