如何首先删除引导移动设备（首先使用桌面）答案

【问题标题】：How to remove bootstraps mobile first (use desktop first)如何首先删除引导移动设备（首先使用桌面）
【发布时间】：2014-06-08 22:21:11
【问题描述】：

是否可以在引导程序中删除移动优先方法并首先使用常规桌面？基本上从台式机到平板电脑再到移动设备，就像以前一样。

我想保留响应式功能，但在创建针对较小设备的媒体查询时，我想从桌面 > 平板电脑 > 移动设备开始。我需要编辑一些文件吗？

【问题讨论】：

你能解释一下你想要达到的目标吗？默认情况下，Bootstrap 在大屏幕上仍然可以很好地工作，所以我想知道您的确切顾虑是什么？
如果您想完全移除响应式 (RWD) 方法，他们提供了相关说明：getbootstrap.com/getting-started/#disable-responsive
@settheline 是的，它可以工作，但媒体查询通常会覆盖我自己的媒体查询，我经常不得不使用 !important 或其他东西，但感觉不是很干净。我不明白为什么要从移动设备上实际构建您的网站。因为默认的媒体查询也是来自移动端。我应该使用一些不同的方法来更好地满足我的需求吗？
@cvrebert 不，正如我在问题中所述，我不想删除响应式功能。
你说的是网格系统吗？除了网格之外，我不知道 Bootstrap 的其他组件会受到开箱即用的媒体查询的影响。

【解决方案1】：

Bootstrap 完全建立在“移动优先”的思维模式中。要进行如此大规模的更改并非易事。如果您想像以前一样首先使用桌面，我建议您只使用旧版本的引导程序。

您可以在此处找到 Bootstrap 2：

如果我没记错的话，那是使用桌面优先的方法。

【讨论】：

是的，bootstrap 2 首先采用桌面方法，我认为更改您正在使用的 bootsrap 版本而不是更改 bootstrap 3 以满足您的需求是一个更好的解决方案
Bootstrap v2.3.2 有几个已知错误，不再维护。
@Blake Mann 是的，我担心它的核心太深了。但我更喜欢使用较新的版本而不是存档版本。我也喜欢新的网格系统。也许如果可以只使用引导程序中的网格系统，我什至不需要所有额外的功能。
我个人使用最新版本的引导程序，但是从桌面的角度进行所有查询，没有太多问题。也许您可以对 CSS 执行其他优化来帮助解决这个问题？可能只是为了防止风格冲突而更好地组织事物。不幸的是，如果不深入研究您的代码，就很难给您任何建议。
是的，我想你是对的，问题可能是我使用了像 max-width 这样的媒体查询，而不是默认的 min-width.. 所以一些样式来自让我们说@max-width of 767px也将应用于 480px。你会像这样订购媒体查询吗？ max-width: 1200px 然后 max-width: 991px 等等？

【解决方案2】：

我不确定我会首先使用术语桌面还是移动设备，因为恕我直言，它们并不能真正代表引导程序是什么。

Bootstrap 2.3.2（关于首先提到的桌面）没有内置响应功能，您必须通过包含一个额外的 CSS 文件来“打开它们”（我相信 bootstrap-responsive.cs） . 我不会首先调用这个桌面，只是因为基本 CSS 对不同屏幕尺寸的灵活性有限。

他们在 Bootstrap 3 中改变了该范例，现在您不需要为响应式功能添加额外的 CSS 文件，所有内容都包含在内所以我不会将其称为移动优先方法，而是一种灵活的方法不同的屏幕尺寸，无论设备如何，无论是桌面平板电脑、移动设备、投影仪等，我会说更多的是它与设备无关的方法。

现在你说你仍然想要响应式功能（所以在没有响应式 CSS 的情况下恢复到 Bootstrap 2，你会失去响应式），那么你似乎对 Bootstrap 3 有什么特别的担心会以某种方式成为障碍？

最终，CSS 只是根据屏幕大小呈现，我根本不会称其为移动优先，然后是桌面，然后是平板的方法，只是响应屏幕大小。

【讨论】：

请看我上面的评论。基本上，他们建议并迫使您首先为内容较少的移动设备构建网站，然后在用户使用更大的屏幕时扩展内容和用户看到的内容。媒体查询是以这种方式构建的，当尝试使用自定义媒体查询但首先针对桌面然后针对移动设备时，桌面样式会覆盖声明的移动样式，因此我必须使用 !important 来修复它。
没有具体的例子，必须使用 !important 对我来说只是意味着你的 CSS 规则不像前面的那样具体。我已经多次使用 bootstrap 3，主要用于桌面站点并且从未遇到任何问题，尽管与任何库一样，它有自己的意见，并且使用它往往比使用它更容易生活。我发现媒体查询必须按特定顺序编写才能正常工作，这主要是因为 CSS 的级联性质。
是的，我认为这就是问题所在，我使用诸如 max-width 之类的媒体查询，而不是默认的 min-width.. 所以一些样式来自让我们说 @max-width of 767px也到 480 像素。