开发网站时如何处理不同的屏幕分辨率/屏幕尺寸？

Question

我想使用jQuery开发一个能够适用于所有主流浏览器的网站。我计划从基本布局开始（包括页眉、带有内容的几个选项卡和页脚）。我想知道如何创建这个布局以支持不同的屏幕分辨率、屏幕大小或窗口大小。在定义组件的宽度和高度时，我应该使用像素/点/百分比单位吗？是否有任何jQuery插件可以帮助我完成此任务？谢谢！

- Misha Moroshko

---

纯粹的媒体查询怎么办？ - Asherah

Answer 1

有许多解决此问题的方案，但它们主要取决于您想通过网站共享什么类型的内容（例如嵌入式视频或图像，可能具有有限的大小）以及您想要的外观和感觉。

对于在多个浏览器中良好运行并跨越广泛窗口大小范围的Web布局，您应该看一下“流体布局”。以下是几个关于这些布局的教程链接。

• 易于使用的流体布局 | Max Design
• 流式CSS布局-表格网站的设计替代方案
• 固定宽度布局与流动布局

您还可以使用JavaScript（包括jQuery）根据窗口分辨率调整样式/内容（例如，针对较小的屏幕（如手机），从多列布局更改为单列布局）。这被称为“自适应内容”。

• 自适应CSS布局：流体布局的新时代？

- Luke Stevenson

Answer 2

这是我过去使用的一些简单脚本（使用jQuery）：

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "css/blue-800.css";
 if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; }
 if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; }
 if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; }
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}

代码中使用的页面宽度值是任意的，并且已经调整到适合特定网站的状态，因此可以根据需要进行调整。

此外，在每个CSS文件中只有少量的CSS设置了主要容器/包装器和背景图像的宽度。

---

更新#2：如果您正在尝试维护有效的HTML，则可以将所有CSS样式表添加到页面头部（在每个样式表中包含title属性）中：

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" />

然后使用这个脚本。如果你在CSS中包含了背景图片，可能会出现白色闪烁的情况，因此请确保设置基本的CSS样式。

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "blue1";
 if (pageWidth > 510) { sizeSelected = "blue2"; }
 if (pageWidth > 580) { sizeSelected = "blue3"; }
 if (pageWidth > 900) { sizeSelected = "blue4"; }
 if (pageWidth > 1010) { sizeSelected = "blue5"; }
 if (pageWidth > 1420) { sizeSelected = "blue6"; }
 var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled');
 $('head').find('link[title]').not(lnk).attr('disabled', 'disabled');
}

- Mottie

---

链接样式表应该发生在页面的头部，因此这甚至不能产生接近有效的HTML。只是一个提示。 - Arve Systad

这很巧妙。"disabled" 跨浏览器工作吗？哦，为什么不从一个在 HTML 中未被禁用的选项开始，以便更快地加载默认选项，然后再逐个禁用其他选项？当没有 JS 时也适用。 - user241244

此外，您可以通过将类应用于body并在样式表中仅应用于具有该类的页面来获得相同的效果。（我更喜欢的方法。较少的http请求、文件和麻烦。） - user241244

@D_N：它在跨浏览器方面对我很有效，而且我不能因为聪明才智而得到赞誉，它最初是用JavaScript编写的（http://javascript.about.com/library/blswitch.htm），我只是将其转换为jQuery :P - Mottie

Answer 3

jQuery本身无法帮助您完成此操作。您必须掌握基本的HTML和CSS。如果需要，可以使用JavaScript和jQuery，但不要仅仅为了使用而使用。在Web上处理尺寸时，应该使用像素或百分比。点是用于打印的。字体大小应该以EM或像素为单位设置。

固定布局是普通网页中最常见的布局方式，通过使用像960gs这样的网格框架，您可以轻松地使比例看起来合理，并同时支持绝大多数屏幕分辨率。同时，将图形适应固定宽度布局也变得更加容易，从而使页面易于使用。

请记住，如果使用百分比，文本行长度超过600-800像素会变得困难或缓慢阅读。即使视口宽度为1000px，拥有80％的内容区域可能是一个不错的想法，但如果视口宽度为1900px，则该站点变得几乎无法使用。

通常情况下，不需要显式设置事物的高度，因为随着容器内容的增加，高度会自动增加。当然，您可以在某些事物上设置高度，但这完全取决于实际情况。

因此，使用动态或固定宽度取决于您的内容。

- Arve Systad

---

有什么原因导致您的投票下降吗？就我所知，我的答案完全符合问题。 - Arve Systad

Answer 4

根据您的需求描述，我强烈推荐您查看Yahoo用户界面（YUI）库中的“Grids” CSS文件，您可以在此处找到该文件及文档：http://developer.yahoo.com/yui/grids/。

网格包的基本设置包括标题、正文和页脚。如果需要，您可以删除标题和/或页脚。正文可以使用嵌套网格模型进行划分，并包含各种模板。

个人而言，我会从YUI的“reset-fonts-grids”组合文件开始制作所有HTML/CSS页面。它为您提供了跨浏览器的CSS重置文件、网格文件和一些标准化字体类。

- Jason