响应式布局上的 Twitter Bootstrap 平板电脑尺寸 1024 而不是 979

Question

我不明白为什么 Twitter Bootstrap 将平板电脑尺寸从 768 考虑到 979，而不是从 768 到 1024 (iPad)。问题是，如果客户要求为平板电脑定制设计，平板电脑设计将不会在 iPad 上以横向模式显示。

另外，如果我有一个带有侧边栏 (span9 + span3) 的内容，如果侧边栏是“隐藏平板电脑”，则内容不会扩展，实际上它会具有相同的大小，我必须将引导程序跨度维度覆盖为实现所需的布局。

我做错了吗？

Answer 1

1) 我认为这里的想法是，一般来说，如果有人请求的页面超过 980 像素，那么它来自台式计算机的可能性比来自 ipad 的可能性高。你也可以让你的页面 ipad 和 web 对这些宽度友好:)。

如果您必须为横向 ipad 和 web 设计不同的设计，则可以选择为屏幕在 980 到 1024 像素之间时编写一堆自定义 css。

@media (min-width 980px) and (max-width: 1024px) {
  //my custom css for ipad landscape
}

2) 你做得对。所有.hidden-tablet 所做的都是设置display: none;

@media (min-width: 768px) and (max-width: 979px) {
  // ... some other code

  .hidden-tablet {
    display: none !important;
  }
}

它不做任何其他类型的调整大小，所以这取决于你来处理媒体查询。