-4

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

你可以在这里查看我正在开发的网站：http: //tinyurl.com/d3xhfdq

我有 4 个 div（mainWraper、页眉、内容和页脚）。

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

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

谢谢

4

3 回答 3

1

除了使用媒体查询，别忘了还使用

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

上面的代码（如果你愿意的话）是由苹果开发的，并且随着它使苹果 iphone 和平板电脑呈现为桌面制作的页面而获得动力。

于 2013-04-05T17:42:34.573 回答
1

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

例如，您可以编写一个媒体查询，当窗口高度为 768 像素或更高时执行某段 CSS，当窗口小于 768 像素时执行另一段 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" />
于 2013-04-05T17:45:41.807 回答
1

响应式设计是您应该研究的主题。A List Apart收集了大量与此主题相关的文章。我建议您按以下顺序阅读以下文章：

  1. 流体网格
  2. 响应式网页设计
  3. 流体图像

这三个将使您在响应式设计方面做得很好。另外，不要忘记php NoOb建议的 viewportmeta标签。当您在物理设备上时，它会产生真正的不同（一些模拟器似乎忽略了它）。可以在以下链接中找到有关此特定标签的其他信息：

于 2013-04-05T17:50:02.200 回答