css - Bootstrap "Mobile first"行为

Question

bootstrap 3 中的“移动优先默认行为”有一些我绝对不理解的地方:

/* 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) { ... }

如果在 480px 处没有断点，Extra small 设备如何成为默认行为？我理解字体大小和其他东西的默认值，但是对于网格系统，如果想要一个 6/12 大小的 block 在 480px 和 768px (col-xs-6) 之间，在小于 480px 时变成 12/12 那么你只是做不到吗？我需要你们解释一下这个概念，因为我不明白这怎么能成为移动优先行为。

PS:我知道社区提供样式表来获得 480px 断点，我也可以自己做，但考虑到 bootstrap 是一个很棒的库，遇到这种麻烦似乎很奇怪，也许我只是不这样做不明白这一点

Answer 1

一般假设内容在所有小于 768 像素的设备/浏览器窗口上的显示方式相同。如果您需要在该断点以下进行区分，您有以下几种选择:

1. 除了 Bootstrap 的默认设置之外，编写您自己的 CSS 以满足您的需求。小心不要遇到可能导致错误样式优先的代码顺序或规范问题
2. Bootstrap 是可定制的，除此之外，您还可以 adjust Bootstraps breakpoints满足您的需求。
3. 如果您喜欢冒险，总是处于最前沿或(取决于您的用例)鲁莽，您也可以使用 Bootstrap 4 ，因为它引入了第 4 个断点(它为您提供了 5 种不同的尺寸)，以便在横向模式下更好地定位设备。

这是来自 Bootstrap 的 V4-Docs 的相关 CSS，不要混淆他们从 px 切换到 em 作为他们的主要测量单位:

// Extra small devices (portrait phones, less than 34em)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }