基金会12列网格调整大小问题
问题描述:
我正在与基金会的12列网格,它按预期工作 - 我有一个大型4和中6列的标志,然后全屏12列的小屏幕。一切都很好,除了当我将iPhone旋转到横向时,标识太大(高)以适应屏幕,因为它仍然是一个“小”屏幕,因此它占据了屏幕的整个宽度因此对于屏幕来说太大(因为它和宽度一样高)。基金会12列网格调整大小问题
所以我的问题是,解决这个问题的最好方法是什么?如果我使用定向媒体查询使其在横向屏幕上变得更小,那么在大型横向屏幕(例如笔记本电脑或计算机屏幕)上它太小。另外,如果它不是小屏幕尺寸的全部12列,那么它在移动设备上的纵向方向上太小。
谢谢。
(全屏查看和调整或在手机上查看,看问题。)
<!---->
答
有几个方法可以解决这......如果你有一堆你认为你会想要的东西为此,您可以为该中间阶段添加自定义断点(请参见http://foundation.zurb.com/sites/docs/media-queries.html#sass-variables)。
这就是说,如果你只是想特别针对这个形象,它很可能是足以只是把最大高度就可以了,像
#logo {
margin-bottom: 20px;
max-height: 50vh;
}
这是真棒!非常感谢你,完美工作。我已经解决了这个问题,只需添加一个媒体查询,只显示640像素和横向的屏幕宽度,但最大视口高度要容易得多,谢谢。 :) – Sean