Twitter Bootstrap:为xxs断点添加媒体查询

Question

令我惊讶的是，Twitter Bootstrap没有为移动肖像屏幕构建足够的网站版本的媒体查询。

一件棘手的事情是定义“移动肖像”宽度。以前大多数手机都有320px屏幕宽度，但目前最明智的做法是瞄准比375px更窄的设备。

iPhone scren resolutions

我至少需要一个断点位于375px屏幕宽度的.col-xxs-*类，类似于.col-xs-*。这可以是CSS或SCSS代码。我正在使用Bootstrap-4-alpha，希望Bootstrap-3也能解决这个问题。

Answer 1

您可以通过使用SASS更改$grid-breakpoints和$container-max-widths变量，将新的断点添加到BS 4中。

    /* your _custom.scss */

    @import "bootstrap/functions";
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    $grid-breakpoints: (
      xxs: 0,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    $container-max-widths: (
      xxs: 375px,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    @import "bootstrap";

http://codeply.com/go/mPS4Yros4U

更新2018：既然xs- infix已经在Bootstrap 4中删除了，添加一个新的更小的xxs断点意味着这个最低的断点没有infix。例如：

col-6 (50% on xxs)
col-xs-6 (50% on xs)

关于使用SASS自定义引导程序的说明，来自docs...

在custom.scss....中

修改任何Sass变量和映射Bootstrap 4中的每个Sass变量都包含!default标志，允许您在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制并粘贴变量，修改它们的值，并删除!default标志。如果一个变量已经被赋值，那么它不会被Bootstrap中的默认值重新赋值。

Answer 2

一些bootstrap fork以一种非常可靠的方式提供了额外的断点。这个似乎是定期维护的，对我来说工作得很好：

SCSS：https://gist.github.com/Jakobud/c057577daddbde4dd709

// Mid-Small breakpoint

$screen-ms: 480px !default;
$screen-ms-min: $screen-ms !default;
$screen-ms-max: ($screen-sm-min - 1) !default;

// Redefined Extra Small max value (Can't override non-default variables in SASS)
$screen-xs-max-new: ($screen-ms-min - 1) !default;

// Common styles (see make-grid-columns() in bootstrap/mixins/_grid-framework.scss)

.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

// Misc. class adjustments for col-ms

@media (min-width: $screen-ms) and (max-width: $screen-ms-max) {
  .container {
    max-width: $screen-sm - 20px;
  }
  .hidden-xs {
    display: block !important;
  }
}

// col-ms grid

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include make-grid(ms);
}

// Visibility utilities

@include responsive-invisibility('.visible-xs, .visible-ms');

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-ms-block,
.visible-ms-inline,
.visible-ms-inline-block {
  display: none !important;
}

@media (max-width: $screen-xs-max-new) {
  @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
  @media (max-width: $screen-xs-max-new) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: $screen-xs-max-new) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: $screen-xs-max-new) {
    display: inline-block !important;
  }
}

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-visibility('.visible-ms');
}
.visible-ms-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: block !important;
  }
}
.visible-ms-inline {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline !important;
  }
}
.visible-ms-inline-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline-block !important;
  }
}

@media (max-width: $screen-xs-max-new) {
  @include responsive-invisibility('.hidden-xs');
}

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-invisibility('.hidden-ms');
}

更少：https://gist.github.com/wdollar/135ec3c80faaf5a821b0

Answer 3

您没有指定要为哪种iPhone进行设计，所以这里列出了大多数帮助您入门的方法

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}