基础 12 列网格调整大小问题

Question

我正在使用 Foundation 的 12 列网格，它按预期工作 - 我的徽标是大 4 列和中 6 列，然后是小屏幕的完整 12 列。一切都很好，除了当我将我的 iPhone 旋转到横向并且徽标太大（高）而不适合屏幕时，因为它仍然是 "small" 屏幕，所以它占用屏幕的整个宽度，因此对于屏幕来说太大了（因为它的高度和宽度一样）。

所以我的问题是，解决此问题的最佳方法是什么？如果我使用定向媒体查询使其在横向屏幕上变小，那么它在大横向屏幕（例如笔记本电脑或计算机屏幕）上就太小了。此外，如果它不是小屏幕尺寸的完整 12 列，那么它在移动设备上的纵向方向上太小了。

谢谢。

（查看全屏并调整大小或在 phone 上查看以查看问题。）

See CodePen here

<!---->

http://codepen.io/mrseanbaines/pen/dOdoEy

Answer 1

有几种方法可以解决这个问题...如果您想要为此自定义一些东西，您可以为该中间阶段添加一个自定义断点（请参阅 http://foundation.zurb.com/sites/docs/media-queries.html#sass-variables).

就是说，如果您只是想特别定位此图片，则只需在其上设置最大高度就足够了，例如

#logo {
  margin-bottom: 20px;
  max-height: 50vh;
}