Question

我在这个网站上工作，在1280x1024的屏幕分辨率下看起来不错，但是当我将屏幕分辨率更改为1280x768时，这绝对是非常糟糕的。

您可以在此处查看我正在处理的网站：http://tinyurl.com/d3xhfdq

我有4个div（mainWraper，header，content和footer）。

为了使网站适合任何屏幕分辨率，应遵循哪些正确的程序？

我需要做的是在任何屏幕尺寸中将所有内容都安装在mainWraper中？

由于

Answer 1

除了使用Media queries之外，别忘了使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

上面的代码（如果你愿意的话）是由apple开发的，并且正在获得动力，因为它制作了苹果iphone，平板电脑渲染了桌面制作的页面。

Answer 2

使用CSS3媒体查询。通常，您可以指定最小或最大宽度来定义您的设计，但您也可以使用高度。

例如，您可以编写一个媒体查询，当窗口的高度为768px或更高时执行某个CSS，当窗口小于768px时执行不同的CSS：

   @media screen and (min-height: 768px) {
    #mainWraper {
      /* your code here */
    }
  }


   @media screen and (min-height: 0px) {
      #mainWraper {
        /* your code here */
      }
   }

您也可以在html的头部调用媒体查询，如下所示：

<link rel="stylesheet" media="screen and (max-width: 960px)" href="myStylesheet.css" />

Answer 3

响应式设计是您应该研究的主题。 A List Apart只有great collection of articles与此主题相关。我建议您按以下顺序阅读以下文章：

Fluid Grids
Responsive Web Design
Fluid Images

这三个将帮助您顺利进行设计。此外，请不要忘记 php NoOb 建议的视口meta标记。当你在物理设备上时，它会产生真正的不同（有些模拟器似乎忽略它）。有关此特定标签的更多信息，请访问以下链接：

使网站适合任何屏幕尺寸？

3 个答案: