html - Bootstrap 是否有一些技巧可以相互定义桌面、平板电脑和手机，而不是简单的屏幕尺寸？

Question

我一直在尝试优化我的布局以尽可能响应，但我遇到了一个奇怪的问题；尽管根据 Bootstraps 的网站，我的 iPhone 和 iPad Mini 显示为两个不同尺寸的平台，但在对我的布局进行编辑时，它们似乎都以 sm 尺寸解释布局。

在不影响台式机和平板电脑的情况下，我如何才能让 Bootstrap 明白 960 像素屏幕的小屏幕不适合侧边栏？

Answer 1

Bootstrap 在此处提供精确的媒体查询:http://getbootstrap.com/css/#grid-media-queries .对于 960 像素的屏幕，您必须更改它以适应这个精确的分辨率。当您点击桌面和更大的桌面时，同样适用于调整媒体查询/css。

您可以通过以下几种方式自定义这些媒体查询和 CSS 以满足您的需求:

• 自定义 Bootstrap 并通过“自定义”部分编译和下载结果 http://getbootstrap.com/customize/
• 创建自定义媒体查询/CSS 以正确覆盖默认的 Bootstrap 媒体查询/CSS 规则。这可以通过常规 .css 文件、Less 或 Sass 来完成(请参阅网格表的第一个 url，其中概述了不同媒体尺寸的像素尺寸)。

默认媒体查询似乎适用于您的 iPhone 和 iPad Mini - 并且由于 Bootstrap 的默认设置是移动优先，sm-col 类前缀将使这项工作可能如您所愿(我假设我正在阅读你的陈述正确)。

发布后续消息以查看这是否有帮助和/或可以提供更多详细信息。

我希望我已经帮助和/或指导了您正确的方向(这是我要回答的第一个问题，请客气:-))。