Bootstrap 3断点和媒体查询
在http://getbootstrap.com/css/上说：
我们使用以下媒体查询来在我们的网格系统中创build关键断点。
额外的小设备（手机，高达480px）：没有媒体查询，因为这是Bootstrap中的默认设置
小设备（平板电脑，768像素及以上）：@media（min-width：@ screen-sm）{…}
中等设备（桌面，992px及以上）：@media（min-width：@ screen-md）{…}
大型设备（大型桌面，1200像素及以上）：@media（min-width：@ screen-lg）{…}
我们应该能够在媒体查询中使用@ screen-sm，@ screen-md和@ screen-lg名称吗？ 因为它不适合我 我必须使用@media（min-width：768px）{…}之类的像素测量值才能使用。 难道我做错了什么？
另外，对于额外的小设备是一个错误的参考480px？ 不应该说高达767px？
引导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
Bootstrap不能很好地logging媒体查询。 @screen-sm ， @screen-md ， @screen-lg这些variables实际上是指LESSvariables，而不是简单的CSS。
当您自定义Bootstrap时，您可以更改媒体查询断点，并在编译时将@ screen-xxvariables更改为您定义为screen-xx的任何像素宽度。 这就是像这样的框架可以被编码一次，然后由最终用户定制以适应他们的需要。
在这里可能会提供更清晰的类似问题： Bootstrap 3.0媒体查询
在你的CSS中，你仍然需要使用传统的媒体查询来覆盖或增加Bootstrap的function。
关于你的第二个问题，这不是一个错字。 一旦屏幕低于768px，框架变得完全stream畅，并在任何设备宽度resize，从而消除了断点的需要。 在480px处存在断点，因为移动优化的布局会发生特定的变化。
要看到这一点，请在他们的网站（ http://getbootstrap.com/examples/navbar-fixed-top/ ）上查看这个例子，然后调整窗口的大小，看看768px之后的devise是如何处理的。
这个问题已经在https://github.com/twbs/bootstrap/issues/10203中讨论过，因为兼容性的原因，现在没有计划改变网格。;
你可以从这个fork得到Bootstrap，分支hs： https ： //github.com/Teachnova/bootstrap/tree/hs
这个分支给你一个额外的断点，在480px，所以你必须：
- 移动devise首先（XS，小于480px）
- 在您的HTML中添加HS（水平小型设备）类：col-hs- *，visible-hs …devise水平移动设备（HS，小于768px）
- 平板设备devise（SM，小于992px）
- 桌面设备devise（MD，小于1200像素）
- 大型设备（LG，超过1200像素）的devise
首先devise移动是了解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) */ } }
我知道这有点旧，但我想我会贡献。 基于@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) { }
对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/#gridless
这里有一个关于如何使用Bootstrap 3和LESS的教程： http : //www.helloerik.com/bootstrap-3-less-workflow-tutorial
如果您使用http://lesscss.org/构build您的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是一个variables，而不是用_variable指定的值来replace。 如果你不less用，你可以用这个值replace这个variables：
/* 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) { }
当我使用@media（最大宽度：768px）我的devise在768px断裂。 但是，在767px和769px也是可以的。 所以，我认为这将是767px作为最大宽度定位小设备。
如果你使用LESS，你可以使用这两个额外的工作（testing！）的断点： https ： //github.com/brgrz/bootstrap-breakpoints
HTH
这里是引导程序4中使用的select器。在BS4中没有“最低”设置，因为“超小”是默认设置。 也就是说，您将首先编码XS大小，然后再重写这些媒体。
@media(min-width:576px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){}
@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) { }
