Bootstrap 3中断点和媒体查询

在Bootstrap 3媒体查询文档上，它说。

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

超小设备（手机，小于768px）。 没有媒体查询，因为这是Bootstrap的默认设置。

小型设备（平板电脑，768px及以上）。 @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吗？ (since removed from the documentation)

Dave Powers
已编辑的问题 16日 七月 2019 в 9:19
编程
twitter-bootstrap-3 twitter-bootstrap breakpoints media-queries
25日 十月 2013 в 2:46
11 种观点

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

当你定制Bootstrap的时候，你可以改变媒体查询的断点，当它编译的时候，@screen-xx的变量会被改变为你定义的screen-xx的像素宽度。这就是像这样的框架，可以一次性编码，然后由终端用户定制，以满足他们的需求。

这里有一个类似的问题，可能会提供更多的清晰度：https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries

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

关于你的第二个问题，这不是一个错字。一旦屏幕低于768px，框架就会变得完全流畅，并在任何设备宽度下调整大小，不再需要断点。480px的断点之所以存在，是因为在移动优化的过程中，布局会发生一些特殊的变化。

要看这个动作，请到他们网站上的这个例子（http://getbootstrap.com/examples/navbar-fixed-top/），调整你的窗口大小，看它如何处理768px之后的设计。

Community
编辑本段答案23日 五月 2017 в 10:31
评论(2)

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

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

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

1.首先为移动设备设计（XS，小于480px）。 2.2.在你的HTML中添加HS（Horizontal Small Devices）类：col-hs-*, visible-hs, ...并为水平移动设备设计（HS，小于768px）。 3.为平板设备设计（SM，小于992px）。 4.为桌面设备设计（MD，小于1200px）。 5.为大型设备设计(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) */
    }
}
Dave Powers
编辑本段答案17日 七月 2019 в 1:52
评论(4)

对480px的提及已被删除。相反，它说。

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

在Bootstrap 3中，没有一个低于768px的断点。

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

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

评论(0)