Question

我正在开展一个项目，我必须为该网站制作响应版本。该网站是一个单页网站，由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) {...}

但由于当前设计中的固定高度百分比，这不能得到理想的结果。

请提出任何建议。

Answer 1

我的理解是 - 你有100％的宽度和反应高度。

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

我做过类似here的事情。

看看它是否有帮助。

由于

Answer 2

无需在每个屏幕尺寸中设置宽度和高度。

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

例如，在大屏幕中内容为80％宽度，在小屏幕中内容可以是100％宽度;

我强烈建议您使用skeleton和foundation这样的网格系统来查看一些css框架。他们在响应式设计方面都很出色，你可以使用它并从中学习！

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

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

这可能会解决一些问题！

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

2 个答案: