twitter-bootstrap - Bootstrap 3 断点和媒体查询

Question

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

超小型设备（手机，小于 768 像素）：没有媒体查询，因为这是 Bootstrap 中的默认设置

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

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

大型设备（大型桌面，1200 像素及以上）： @media (min-width: @screen-lg-min) { ... }

我们是否也应该能够在媒体查询中使用@screen-sm、@screen-md和名称？@screen-lg因为它对我不起作用。我必须使用像素测量，例如@media (min-width: 768px) {...}在它起作用之前。难道我做错了什么？

~~此外，对于超小型设备的 480 像素的引用是错字吗？那不应该说高达767px吗？~~（因为从文档中删除）

score 218 · Accepted Answer

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

score 40 · Accepted Answer

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

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

这里有一个类似的问题，可能会更清楚：Bootstrap 3.0 Media queries

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

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

要查看实际效果，请访问他们网站 ( http://getbootstrap.com/examples/navbar-fixed-top/ ) 上的此示例，然后调整窗口大小以查看 768 像素后它如何处理设计。

score 30 · Accepted Answer

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

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

这个分支在 480px 处给你一个额外的断点，所以你必须：

移动优先设计（XS，小于 480 像素）
在您的 HTML 中添加 HS（水平小型设备）类：col-hs-*、visible-hs，...并为水平移动设备设计（HS，小于 768 像素）
平板设备设计（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) */
    }
}

score 7 · Accepted Answer

我知道这有点老了，但我想我会做出贡献。根据@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) {

}

score 6 · Accepted Answer

对 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

score 3 · Accepted Answer

如果您使用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

实际上是一个变量，而不是在使用 Less 构建时@screen-sm-min被指定的值替换。_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) {  }

score 1 · Accepted Answer

这是 Bootstrap 4 中使用的选择器。BS4 中没有“最低”设置，因为“特小”是默认设置。即，您将首先对 XS 尺寸进行编码，然后再对这些媒体进行覆盖。

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

score 0 · Accepted Answer

为了在依赖旧 Bootstrap 版本的项目中并行使用 Bootstrap 4 的 mixin，您可以尝试通过 npm 使用别名安装两者：

npm i bootstrap-3@npm:bootstrap-sass@\^3 bootstrap-4@npm:bootstrap@\^4 bootstrap-5@npm:bootstrap@\^5 bootstrap

注意：此命令安装版本 3、4、5 和最新版本。如果只需要 3 和 4，请进行调整！由于空间的原因，我通过符号链接使用 node_modules 并且我需要跨项目的所有这些:-)

然后得到你需要的部分：

// Bootstrap 3
@import '../../../node_modules/bootstrap-3/assets/stylesheets/_bootstrap.scss';

// Extend: Bootstrap 4 Media Queries
@import "../../../node_modules/bootstrap-4/scss/_functions.scss";
@import "../../../node_modules/bootstrap-4/scss/_variables.scss";
@import '../../../node_modules/bootstrap-4/scss/mixins/_breakpoints.scss';

当然是调整路径！

如果有任何效果，您现在可以使用：

@include media-breakpoint-up(sm) {}

在引导程序 3 中。

否则，用搜索替换 mixins / 用 px 替换。

score 0 · Accepted Answer

对于引导程序 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

score 0 · Accepted Answer

附有示例的 Bootstrap 4 媒体查询

@media (min-width: 576px) { 
.responsive{
color:red
}
}

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

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

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

<h2>Bootstrao 4 </h2>
<div class="responsive"> see colour herer</div>

score -6 · Accepted Answer

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



}

twitter-bootstrap - Bootstrap 3 断点和媒体查询

11 回答 11

Bootstrap 4 媒体查询

Bootstrap 3 媒体查询

Bootstrap 2.3.2 媒体查询

Related

Reference