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

Question

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

此外，如果我的内容带有侧边栏 (span9 + span3)，如果侧边栏是“隐藏平板电脑”，则内容不会扩展，实际上它具有相同的大小，我必须覆盖 bootstraps span dimensions 到实现所需的布局。

我做错了什么吗？

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;
  }
}

它不执行任何其他类型的调整大小，因此您可以使用媒体查询来完成。