如何在响应式设计中定义高度答案

【问题标题】：how to define height in responsive design如何在响应式设计中定义高度
【发布时间】：2014-02-12 17:07:16
【问题描述】：

我正在开发一个项目，我必须为此制作网站的响应版本。该网站是一个用jquery制作的单页网站，固定高度和宽度，绝对定位。网站内容必须在浏览器的视口内，查看here，

现在的问题是，我不仅要注意屏幕的宽度，还要注意屏幕的高度，如果我同时针对固定设备的高度和宽度，代码将会很大，任何建议，我的计划使用，

@media screen and (max-width:479px) {...}
@media screen and (min-width:480px) and (max-width:639px) {...}
@media screen and (min-width:640px) and (max-width:959px) {...}
@media screen and (min-width:960px) and (max-width:1279px) {...}
@media screen and (min-width:1280px) and (max-width:1599px) {..}
@media screen and (min-width:1600px)  and (max-width:1919px){...}
@media screen and (min-width:1920px) {...}

但这并没有给出理想的结果，因为当前设计中的高度百分比是固定的。

请给点建议。

【问题讨论】：

也许，这个答案可以帮助你：stackoverflow.com/a/12848217/3288548

标签： jquery html css responsive-design

【解决方案1】：

我的理解是 - 你有 100% 的宽度和响应高度。

为此，您可以将宽度设置为 100%，并使用媒体查询来保持高度。

我做过类似的here。

看看有没有帮助。

谢谢

【讨论】：

【解决方案2】：

每个屏幕尺寸无需同时设置宽度和高度。

在您的情况下，网站的高度始终为 100%。您需要注意的只是内容宽度。

例如，大屏内容为 80% 宽度，小屏内容可能为 100% 宽度；

我强烈建议您看看一些带有网格系统的 css 框架，例如 skeleton 和 foundation。它们在响应式设计方面都很棒，您可以使用并从中学习！

顺便说一句，处理背景图片，可以使用css attr

-moz-background-size: cover;       
-webkit-background-size: cover;     
-o-background-size: cover;  
background-size: cover;

这可能会解决一些问题！

【讨论】：