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

Question

提问by Kris Hunt

On the Bootstrap 3 media queries documentationit says:

We use the following media queries in our Less files to create the key breakpoints in our grid system.
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) { ... }

我们在 Less 文件中使用以下媒体查询在我们的网格系统中创建关键断点。
超小型设备（手机，小于 768 像素）：没有媒体查询，因为这是 Bootstrap 中的默认设置
小型设备（平板电脑，768px 及以上）： @media (min-width: @screen-sm-min) { ... }
中型设备（台式机，992px 及以上）： @media (min-width: @screen-md-min) { ... }
大型设备（大型桌面，1200px 及以上）： @media (min-width: @screen-lg-min) { ... }

Are we supposed to be able to use the @screen-sm, @screen-md, and @screen-lgnames in our media queries as well? Because it doesn't work for me. I have to use pixel measurements such as @media (min-width: 768px) {...}before it will work. Am I doing something wrong?

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

~~Also, is the reference to 480px for extra small devices a typo? Shouldn't that say up to 767px?~~(since removed from the documentation)

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

Answer 1

回答by Sophy

Bootstrap 4 Media Queries

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 provides source CSS in Sass that you can include via Sass Mixins:

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 Media Queries

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 Queries

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

}

Resource from : https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

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

Answer 2

回答by Lance Turri

Bootstrap does not document the media queries very well. Those variables of @screen-sm, @screen-md, @screen-lgare actually referring to LESS variables and not simple CSS.

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

When you customize Bootstrap you can change the media query breakpoints and when it compiles the @screen-xx variables are changed to whatever pixel width you defined as screen-xx. This is how a framework like this can be coded once and then customized by the end user to fit their needs.

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

A similar question on here that might provide more clarity: Bootstrap 3.0 Media queries

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

In your CSS, you will still have to use traditional media queries to override or add to what Bootstrap is doing.

在你的 CSS 中，你仍然需要使用传统的媒体查询来覆盖或添加 Bootstrap 正在做的事情。

In regards to your second question, that is not a typo. Once the screen goes below 768px the framework becomes completely fluid and resizes at any device width, removing the need for breakpoints. The breakpoint at 480px exists because there are specific changes that occur to the layout for mobile optimization.

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

To see this in action, go to this example on their site (http://getbootstrap.com/examples/navbar-fixed-top/), and resize your window to see how it treats the design after 768px.

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

Answer 3

回答by Antonio Espinosa

This issue has been discussed in https://github.com/twbs/bootstrap/issues/10203By now, there is no plan to change Grid because compatibility reasons.

这个问题已经在https://github.com/twbs/bootstrap/issues/10203 中讨论过，由于兼容性原因，目前还没有更改 Grid 的计划。

You can get Bootstrap from this fork, branch hs: https://github.com/antespi/bootstrap/tree/hs

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

This branch give you an extra breakpoint at 480px, so yo have to:

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

Design for mobile first (XS, less than 480px)
Add HS (Horizontal Small Devices) classes in your HTML: col-hs-*, visible-hs, ... and design for horizontal mobile devices (HS, less than 768px)
Design for tablet devices (SM, less than 992px)
Design for desktop devices (MD, less than 1200px)
Design for large devices (LG, more than 1200px)

移动优先设计（XS，小于 480px）
在您的 HTML 中添加 HS（水平小型设备）类：col-hs-*、visible-hs、...以及为水平移动设备设计（HS，小于 768px）
平板设备设计（SM，小于 992px）
桌面设备设计（MD，小于1200px）
为大型设备设计（LG，超过 1200 像素）

Design mobile first is the key to understand Bootstrap 3. This is the major change from BootStrap 2.x. As a rule template you can follow this (in LESS):

设计移动优先是理解 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) */
    }
}

Answer 4

回答by Enrico

I know this is a bit old, but i thought i would contribute. Basing myself on the answer by @Sophy, this is what I did to add a .xxs breakpoint. I have not taken care of visible-inline, table.visible, etc classes.

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

}

Answer 5

回答by Anthony

The reference to 480px has been removed. Instead it says:

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

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

There isn't a breakpoint below 768px in Bootstrap 3.

Bootstrap 3 中没有低于 768px 的断点。

If you want to use the @screen-sm-minand other mixins then you need to be compiling with LESS, see http://getbootstrap.com/css/#grid-less

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

Here's a tutorial on how to use Bootstrap 3 and LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

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

Answer 6

回答by gagarine

You should be able to use those breakpoints if you use http://lesscss.org/to build your CSS.

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

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

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

In fact @screen-sm-minis a variable than is replaced by the value specified in _variablewhen building with Less. If you don't use Less, you can replace this variable by the value:

实际上@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 officially supports Sass: https://github.com/twbs/bootstrap-sass. If you are using Sass (and you should) the syntax is a bit different.

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

Answer 7

回答by Babbandeep Singh

Here are the selectors used in Bootstrap 4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

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

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

Answer 8

回答by Daniel

for bootstrap 3 I have the following code in my navbar component

对于引导程序 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})";

then you can use something like

然后你可以使用类似的东西

@media wide { selector: style }

This uses whatever value you have the variables set to.

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

Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

转义允许您使用任意字符串作为属性或变量值。~"anything" 或 ~'anything' 中的任何内容都按原样使用，除了插值外没有任何变化。

http://lesscss.org

Answer 9

回答by Xuwel Khan

when i use @media (max-width:768px) my design breaks on 768px. But it is ok on 767px and also on 769px. So, i think it will be 767px as max-width for targeting small devices.

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

Answer 10

回答by Danish K T

@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 断点和媒体查询

提问by Kris Hunt

回答by Sophy

Bootstrap 4 Media Queries

Bootstrap 4 媒体查询

Bootstrap 3 Media Queries

Bootstrap 3 媒体查询

Bootstrap 2.3.2 Media Queries

Bootstrap 2.3.2 媒体查询

回答by Lance Turri

回答by Antonio Espinosa

回答by Enrico

回答by Anthony

回答by gagarine

回答by Babbandeep Singh

回答by Daniel

回答by Xuwel Khan

回答by Danish K T

相关推荐

最近更新

标签

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

提问by Kris Hunt

回答by Sophy

Bootstrap 4 Media Queries

Bootstrap 4 媒体查询

Bootstrap 3 Media Queries

Bootstrap 3 媒体查询

Bootstrap 2.3.2 Media Queries

Bootstrap 2.3.2 媒体查询

回答by Lance Turri

回答by Antonio Espinosa

回答by Enrico

回答by Anthony

回答by gagarine

回答by Babbandeep Singh

回答by Daniel

回答by Xuwel Khan

回答by Danish K T

相关推荐

twitter-bootstrap 在 Bootstrap 3.0 中禁用列表组项

twitter-bootstrap Bootstrap 折叠隐藏 onClick

twitter-bootstrap 如何将切换按钮与隐藏内容集成（引导程序）

twitter-bootstrap 模态内的引导程序表单未正确对齐

相关推荐

最近更新

标签