在http://getbootstrap.com/css/上说：
我们使用以下媒体查询来创建关键断点 我们的网格系统。
超小型设备（手机，最高480px）： 没有媒体查询，因为这是Bootstrap中的默认值
小型设备（平板电脑，768像素及以上）： @media（min-width：@ 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？
答案 0 :(得分：155)
// 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;
}
}
/*========== 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) {
}
@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
答案 1 :(得分：38)
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之后如何处理设计。
答案 2 :(得分：23)
此问题已在https://github.com/twbs/bootstrap/issues/10203中讨论过 到目前为止，由于兼容性原因，没有计划更改Grid。
你可以从这个分支中获取Bootstrap，分支hs：https://github.com/Teachnova/bootstrap/tree/hs
这个分支给你一个480px的额外断点，所以你必须：
首先设计移动是理解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) */
}
}
答案 3 :(得分：7)
我知道这有点旧，但我想我会做出贡献。 基于@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) {
}
答案 4 :(得分：6)
已删除对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
答案 5 :(得分：2)
如果使用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中指定的值替换。如果您不使用更少，则可以使用以下值替换此变量：
/* 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) { }
答案 6 :(得分：1)
以下是Bootstrap 4中使用的选择器。没有＆＃34;最低＆＃34;在BS4中设置因为＆＃34;特别小＆＃34;是默认值。即您将首先编码XS大小，然后将这些媒体覆盖。
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
答案 7 :(得分：0)
当我使用@media（最大宽度：768px）时，我的设计在768px上中断。但它在767px和769px上都可以。因此，我认为针对小型设备的最大宽度为767px。
答案 8 :(得分：0)
对于bootstrap 3，我的导航栏组件中包含以下代码
orgId然后您可以使用
之类的东西/**
* 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})";
这将使用您将变量设置为的任何值。
转义使您可以将任意字符串用作属性或变量值。 〜“ anything”或〜'anything'内部的任何内容都按原样使用，除了插值以外没有其他变化。
答案 9 :(得分：0)
为了在依赖旧 Bootstrap 版本的项目中并行使用 Bootstrap 4 的 mixin，您可以尝试使用 alias via 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) {}
在 Bootstrap 3 中。
否则用搜索替换混合/用像素替换。
答案 10 :(得分：-6)
@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) {
}