如何在开发网站时处理不同的屏幕分辨率/屏幕尺寸？
我想使用jQuery开发一个可以与所有主流浏览器一起使用的网站。 我想从一个基本布局开始（一个标题，一些包含内容的标签和页脚）。 我想知道如何创建此布局以支持不同的屏幕分辨率，屏幕大小或窗口大小。 在定义组件的宽度和高度时，我应该以像素/点/百分比工作吗？ 是否有任何jQuery插件可以帮助我完成这项任务？ 谢谢 ！
这个问题有很多解决方案，但它们主要取决于您希望通过网站分享的内容类型（即嵌入的video或可能具有有限大小的图像）以及您想要的外观和感觉。
对于在多种浏览器中以及各种窗口大小都能很好地工作的Web布局，您应该查看“Liquid Layouts”。 以下是有关这些布局的教程的一些链接。
- 液体布局简单方法| 最大设计
- 液体CSS布局 – 基于表格的网站的替代设计
- 固定宽度布局与液体布局
您还可以使用Javascript（包括jQuery）根据窗口分辨率调整样式/内容（例如，从多列布局更改为较小屏幕的单列布局，例如移动电话）。 这称为“自适应内容”。
- 自适应CSS布局：流体布局的新时代？
这是我过去使用过的一些简单的脚本（使用jQuery）：
$(document).ready(function(){ $('body').append(''); 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(''); } 代码中使用的页面宽度值是任意的，并且经过调整以适用于特定站点，因此可以根据需要随意调整它们。
此外，每个CSS文件内部只有少量的CSS，可以设置主要容器/包装器甚至背景图像的宽度。
更新＃2：如果您尝试维护有效的HTML。 然后，您可以将所有CSS样式表添加到页面的头部（在每个样式中包含一个title属性）：
然后使用此脚本。 如果在CSS中包含背景图像，则可能会出现白色闪烁，因此请确保设置基本CSS样式。
$(document).ready(function(){ $('body').append(''); 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'); }
jQuery本身无法帮助你做到这一点。 你必须掌握基本的HTML和CSS。 如果需要，请使用Javascript和jQuery，不要仅仅使用它。 当涉及到Web上的维度时，您应该使用像素或百分比。 点数用于打印。 字体大小应在EM或像素中设置。
固定布局是普通网页最常见的，通过使用像960gs这样的网格框架，您可以轻松地使比例看起来不错，同时仍然支持绝大多数屏幕分辨率。 使图形适应固定宽度布局也更容易，同时使页面易于使用。
请记住，当使用百分比超过大约600-800像素的文本行很难或读取速度很慢时。 对于video宽度为1000px的内容区域为80％的Aka可能是一个不错的主意，但如果您的视口为1900px，则该网站几乎无法使用。
并且通常没有明确地设置事物的高度，因为随着容器的内容增加，高度将自动增加。 当然，你可以设定某些东西的高度，但这完全取决于什么，真的。
因此，使用动态或固定宽度都取决于您的内容。
根据您描述的需求，我强烈建议您从Yahoo用户界面（YUI）库中查看“Grids”css文件，您可以在此处找到该文件和文档： http ： //developer.yahoo.com/yui/grids / 。
网格包的基本设置包括页眉，正文和页脚。 如果需要，您可以删除页眉和/或页脚。 可以使用嵌套网格模型划分主体，并包括各种模板。
就个人而言，我开始使用YUI组合的“reset-fonts-grids”文件创建所有HTML / CSS页面。 它为您提供了跨浏览器的css重置文件，网格文件以及一些字体的标准化类。