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

Question

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

Answer 1

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

对于在多种浏览器和各种窗口尺寸中都能正常工作的网页布局，您应该查看“液体布局”。以下是有关这些布局的教程的一些链接。

• 液体布局的简单方法 | Max Design
• 液体 CSS 布局 - 基于表格的网站的设计替代方案
• < a href="http://webdesign.about.com/od/layout/i/aa060506.htm" rel="noreferrer">固定宽度布局与液体布局

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

• 自适应 CSS 布局：流体布局的新时代？< /a>

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 样式表添加到页面的头部（每个样式表中都包含一个标题属性）：

<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');
}

Answer 3

jQuery 本身无法帮助你做到这一点。您必须掌握基本的 HTML 和 CSS 的窍门。如果需要就使用 Javascript 和 jQuery，不要只是为了使用而使用。当涉及到网络尺寸时，您应该使用像素或百分比。积分用于打印。字体大小应以 EM 或像素为单位设置。

固定布局对于普通网页来说是最常见的，通过使用像 960gs 这样的网格框架，您可以轻松实现使比例看起来不错，同时仍然支持绝大多数屏幕分辨率。将图形适应固定宽度布局也非常容易，同时使页面易于使用。

请记住，当/如果使用百分比时，长度超过 600-800 像素的文本行会难以阅读或阅读缓慢。也就是说，对于 1000 像素宽的视口来说，内容区域为 80% 可能是一个好主意，但如果您的视口为 1900 像素，则该网站将变得几乎无法使用。

而且人们通常不会明确设置物体的高度，因为高度会随着容器内容的增加而自动增加。当然，您可以设置某些东西的高度，但这实际上取决于什么。

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

Answer 4

根据您所描述的需求，我强烈建议您查看雅虎用户界面 (YUI) 库中的“Grids”css 文件，您可以在此处找到该文件和文档：http://developer.yahoo.com/yui/grids/。

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

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