响应式设计，设备高度

Question

我正在为所有设备（尺寸）制作响应式应用，我使用了公式，目标/上下文=结果。对于宽度我给出93.75％（900/960），当我使用相同的公式高度 - 62.5％它不可见，如果我使用600px的高度，maincontent div是可见的，如何解决这个问题？

以下是我试过的代码，

<div class="maincontent"></div>

.maincontent{
width:93.75%;/*900/960*/
margin:5% 3.125%; /*30/960*/ 
height:62.5%;/*600*/
background:#2c3e50;
}

Answer 1

我认为你在这方面付出了比你需要的更多的工作，这就是我如何设置你的计算器：

http://jsfiddle.net/TTQ4e/1/

使用百分比可能会很快变得凌乱 - 注意我使用的百分比是100％。

你可以通过做这样的事情来使div在一定高度后可见

.myDiv {
    display:none;
}

@media (max-height:600px) {
    .myDiv {
        display:block;
    }
}

修改

此外，您应该真正担心的唯一手持设备分辨率是：

小320x480

小480x320

为360x640

640×360

768×1024

1024×768

800x1280

1280×800