我很惊讶Twitter Bootstrap没有针对移动肖像屏幕构建足够的网站版本的媒体查询。Twitter Bootstrap：为xxs断点添加媒体查询
一个棘手的问题是定义“移动肖像”的宽度。以前大多数手机屏幕宽度为320px，但目前最可取的方式是瞄准窄于375px的设备。
我需要与375px屏幕宽度断点，类似于.col-xs-*至少.col-xxs-*类。这可以是CSS或SCSS代码。我正在使用Bootstrap-4-alpha，希望解决方案也适用于Bootstrap-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) {
}
一些引导叉在一个非常坚实的方式来提供额外的断点。这一次似乎是定期维护和对我工作得很好：
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');
}
在引导4你可以通过编辑$grid-breakpoints -variable添加一个新的断点。它最初是：
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
通过改变它
$grid-breakpoints: (
xxs: 0,
xs: 375px,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
您将添加一个新的断点xxs。不过，我会建议2点登录标识，像ms为“中小”：
$grid-breakpoints: (
xs: 0,
ms: 375px,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
在TWBS3这不是那么容易 - 那里，你将不得不破解的代码。
您可以通过使用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-缀一直在引导4中删除，增加新的更小的XXS断点意味着该最低断点没有中缀。例如：
col-6 (50% on xxs)
col-xs-6 (50% on xs)
使用注意事项SASS引导，从文档定制...
修改任何无礼变量和地图在custom.scss .... Bootstrap 4中的每个Sass变量都包含！默认标志允许 你可以在你自己的Sass中覆盖变量的默认值，而不用 修改Bootstrap的源代码。根据需要复制并粘贴变量， 修改它们的值，并删除！默认标志。如果一个变量已经被分配了 ，那么它将不会被Bootstrap中默认的 值重新分配。
我的不好，我忘记了并非所有的iPhone的屏幕宽度为'320px'。我已经更新了我的问题，以便现在更清楚 – Dan