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,所以你必须:

  1. 移动devise首先(XS,小于480px)
  2. 在您的HTML中添加HS(水平小型设备)类:col-hs- *,visible-hs …devise水平移动设备(HS,小于768px)
  3. 平板设备devise(SM,小于992px)
  4. 桌面设备devise(MD,小于1200像素)
  5. 大型设备(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) { }