媒体查询多个高度&宽度

时间:2015-11-26 05:15:52

标签: css css3 media-queries

我正在构建一个响应式网站,并将其设计为正确的桌面视图。

我目前正在调整响应断点/媒体查询。

以下是我希望获得指导的问题:

根据我的理解,我看到人们只使用宽度作为他们的断点。在这种情况下,我做了同样的事情,并使它在所有宽度断点上都看起来很好。

然而,我碰巧使用谷歌浏览器开发工具测试并开始选择特定设备(iphone 5,iphone 6,iphone 6 plus,ipad等)

并注意到一些令人担忧的事情,即元素在顶部和底部垂直被推离屏幕,因为这些设备不仅具有不同的宽度,而且还具有不同的高度。

所以我的完美主义者正在考虑为每个主要设备设置高度和宽度的媒体查询,但我意识到这项工作虽然可以做到,但可能不是最有效的,我还没有看到其他教程这样做。

我的具体问题是:如果有一种更有效的方式来开发响应式网站而不会使元素垂直离开屏幕。

添加信息:我有一个div包含一个img,然后是一个h1,然后是一个带有col-sm-6的引导行

img宽度是px(我用vh / vw和%进行了实验,但这似乎使它在缩放时更难控制)

1 个答案:

答案 0 :(得分:-3)

您无法为设备高度设置媒体查询,您只能设置高度, 并且不仅仅依赖于Google Chrome开发人员工具,因为有时它不会以正确的方式响应,因此您必须在实际设备中测试电池视图。