Question

我想使用jQuery开发一个可以与所有主流浏览器一起使用的网站。我想从一个基本的布局开始（一个标题，一些包含内容的标签和页脚）。我想知道如何创建此布局以支持不同的屏幕分辨率，屏幕大小或窗口大小。在定义组件的宽度和高度时，我应该以像素/点/百分比工作吗？是否有任何jQuery插件可以帮助我完成这项任务？谢谢！

Answer 1

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

对于在多种浏览器中以及各种窗口大小都能正常运行的网页布局，您应该看一下“Liquid Layouts”。以下是有关这些布局的教程的一些链接。

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

Adaptive CSS-Layouts: New Era In Fluid Layouts?

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

Answer 3

jQuery本身无法帮助你做到这一点。你必须掌握基本的HTML和CSS。如果需要，请使用Javascript和jQuery，不要仅仅使用它。当涉及到Web上的维度时，您应该使用像素或百分比。积分用于印刷。字体大小应在EM或像素中设置。

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

请记住，当使用百分比超过大约600-800像素的文本行很难或读取速度很慢时。内容区域为80％的Aka对于1000px宽的视口来说是一个不错的主意，但如果你有一个1900px的视口，那么该网站几乎无法使用。

并且通常没有明确地设置事物的高度，因为随着容器内容的增加，高度将自动增加。当然，你可以设定某些东西的高度，但这完全取决于什么，真的。

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

Answer 4

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

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

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

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

4 个答案: