Bootstrap 3断点和媒体查询

Question

在http://getbootstrap.com/css/上它说:

我们使用以下媒体查询在网格系统中创建关键断点.

超小型设备(电话,最高480px):无媒体查询,因为这是Bootstrap中的默认设置

小型设备(平板电脑,768像素及以上):@ media(最小宽度:@ screen-sm){...}

中型设备(台式机,992px及以上):@ media(最小宽度:@ screen-md){...}

大型设备(大型台式机,1200px及以上):@ media(最小宽度:@ screen-lg){...}

我们是否应该能够在我们的媒体查询中使用@ screen-sm,@ screen-md和@ screen-lg名称？因为它对我不起作用.在它工作之前,我必须使用像@media(min-width:768px){...}这样的像素测量.难道我做错了什么？

另外,对于超小型设备而言,480px的参考是错字吗？不应该说高达767px？

Answer 1

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提供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媒体查询

/*==========  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

Answer 2

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

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

这里的类似问题可能会提供更清晰的信息:Bootstrap 3.0 Media查询

在CSS中,您仍然必须使用传统的媒体查询来覆盖或添加Bootstrap正在执行的操作.

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

要查看此操作,请在其站点(http://getbootstrap.com/examples/navbar-fixed-top/)上转到此示例,并调整窗口大小以查看它在768px之后如何处理设计.

Answer 3

此问题已在https://github.com/twbs/bootstrap/issues/10203中讨论过. 现在,由于兼容性原因,没有计划更改Grid.

你可以从这个fork获得Bootstrap,分支hs:https://github.com/Teachnova/bootstrap/tree/hs

这个分支给你一个480px的额外断点,所以你必须:

1. 首先设计移动设备(XS,小于480px)
2. 在HTML中添加HS(水平小设备)类: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) */
    }
}

Answer 4

我知道这有点老了,但我想我会做出贡献.基于@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) {

}

Answer 5

已删除对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