在过去，800 x 600 是要设计的屏幕分辨率 - 也许是 640 x 480。然后出现了 1024 x 768 等等等等。
但后来情况变得更糟：现在我们不仅有不同的分辨率，而且还有不同的纵横比。
人们使用什么策略来适应当今不断扩大的屏幕尺寸和宽高比范围？
（顺便说一句 - 我只考虑笔记本电脑/台式机硬件，但当然还有智能手机和平板电脑也需要考虑。）
【问题讨论】：
标签： css screen-resolution aspect-ratio
好吧，尽量让答案不要太长，这就是我所做的。
(A) 始终从最可能使用的比率/分辨率开始
如果您的平均 joe 将使用现代笔记本电脑或台式机，他可能至少有 1024x768（参考：w3schoolselykinnovation），这为您提供了大约 960 像素的可用宽度（您可能需要检查960grid system - 自从我第一次写这个以来，有很多新框架）。 如果您的用户更有可能从移动设备或平板电脑开始，请先了解他们。 如果是50%-50%，通常最好从小做起，然后长大，例如。 Rock Hammer 或 Foundation
(B) 布局：流畅与否？
如果您的网站可以从更大的宽度中受益，请从该分辨率开始选择流畅的设计。注意人眼不喜欢阅读长行文本，所以不要滥用流畅的设计；通常坚持 960 像素并留出较大的边距是可以接受的。 如果您真的有更多空间，您可能想要添加（javascript）一些额外的侧面菜单。但是尽可能将您的网站设计为在没有 JS 的情况下运行。
(C) 其他决议
最后是时候检查一下使用最少的分辨率是否仍然可以接受。
(D) 其他设备、比率和东西
不同比例的选择不多；这通常意味着您在移动设备、ipad、AAA 或类似设备上运行。
我的建议是……专门针对这些设备进行设计。
在编写 HTML 时，请记住您将需要什么，并记住按语义而非设计来编写 HTML。如果可以，请正确使用 HTML5 语义标签。 避免使用 或类似标签，并正确使用您将使用 CSS 设置样式的标签和类。
使用框架！
但您仍然可以为非常不同的设备制作一些不同的设计。您不必在相同的设计中做所有响应式/。
根据客户的不同，有多种方法可以提供不同的 CSS；你可以做到：
您可以通过遵循一些简单的规则轻松地为小型（例如移动）设备生成通用设计： 1. 流体布局能够适应非常小的宽度 2. 紧凑的页眉/页脚不会浪费太多空间 3. 每页内容少，内容清晰 4. 避免 :over 效果，因为它们在触摸设备上不起作用！！！
如果您想走得更远，您必须检查各个设备的自定义；一个例子是 iphone 视口，见apple ref library。
这只是为了让您入门。经验和特定需求将推动其余部分！
【讨论】：
我认为响应式网页设计是您问题的答案。看看这些例子和技巧...Responsive Web Design
【讨论】：
您的网站无法完美地适用于所有显示。即使您一天中有足够的时间（或者我应该说是一年/十年）来设计每一种可能的显示器，但每次新设备问世时，您都必须重新设计。
在我的开发过程中，我仍然虔诚地尝试避免水平滚动，这对于浮动 div/可变宽度 div 来说并不太难。但除此之外，我们确实处于“有一个应用程序适合那个”的十字路口，您需要为特定设备专门设计的显示器。
我使用的一种策略是减少对单个显示器的依赖——客户可能不需要查看您的整个网页来完成他们要做的事情。您可以将功能解析为更小/更简单的网页，以便在不同尺寸的设备上更好地扩展。
在工作中，我有更多的“权力”，因为我可以开发内部网络应用程序，这些应用程序“设计为在……某些特定的浏览器、某些特定的显示设置等上运行——使用其他配置风险自负”。只有在让管理人员同意多花一周时间进行开发（甚至更多用于升级/未来维护）只是为了安抚校园另一端拒绝使用 IE 的素食者之后，这真的不值得.在这种情况下，我们需要另一个 Timmy，而不是更灵活的 Web 应用程序，可以在他最喜欢的非 IE 浏览器上看起来不错。
【讨论】：
我知道这会引起一些争议，但我还是要说：不要
不要针对多种屏幕尺寸或纵横比进行设计。当然也有一些例外：像 webmail 客户端这样的重型 web 应用程序肯定可以使用更多的屏幕空间，并且可能足够灵活以适应大范围的屏幕尺寸。所述网站的移动版本具有更灵活的设计，以适应令人难以置信的移动屏幕尺寸范围，对于移动量大的网站也有帮助。但是，如果您坚持所谓的“桌面网络”，那么我认为我们可以说 95% 的时间比屏幕尺寸、分辨率和纵横比更重要。
首先，让我们解决简单的问题。我真的不明白为什么您会如此关心宽高比 - 我们不再关心 那么 对“首屏以下”的废话了，对吧？网络是一种垂直媒体——滚动在网站中始终占有一席之地。把所有东西都放在神奇的 600px 线之上是愚蠢的。
接下来，屏幕分辨率/尺寸：再一次，我觉得很难辩护。
大屏幕用户通常不会最大化他们的浏览器窗口，因为他们发现大多数网站都没有利用它们。在网络适应用户的同时，用户也适应网络。尽管您可能会争辩说这是一个先有鸡还是先有蛋的问题，但事实仍然是 网站通常是为最小公分母设计的。 我不是在捍卫这个立场，而是指出它成为行业当前的主流趋势。
有些东西在分辨率太高或太低时根本不起作用。例如，允许人们在屏幕上舒适地阅读的宽度范围很小。再长一点，眼睛到下一行的移动量就会很烦人。太低，文本会显得局促。网络被设计为分辨率中立的事实意味着矛盾的是，没有为那些希望构建流畅布局的人做出很多规定。 min-height 和 max-height 当然会有所帮助，但范围越广，您将面临的困难就越多。对于使用当今技术构建的真正灵活的网站来说，诸如孤立元素、移位的图像、用完的背景等问题是不可避免的。
所以我的观点是，处理多个分辨率的最简单方法是完全忽略它 - 以今天的技术，无论如何都没有太多选择 - 并为最小公分母设计。
【讨论】：
position: fix 他们。
注意高 DPI 设置
我认为当今前端 Web 开发面临的最未讨论的问题之一是在高 DPI 系统上进行测试。每个人都学会了在不同的浏览器上进行测试和测试，但设计人员/开发人员还没有开始在不同的 DPI 设置上进行测试。
高（或什至低，就此而言）DPI 设置会在字体缩放但图像未缩放时破坏设计（这可能会发生），可能导致图像看起来模糊/模糊，并且绝对定位的对象可能不会出现在所需的位置位置（这对 CSS 菜单来说将是毁灭性的。）如果不出意外，请以高 DPI 测试您的图像并在必要时重新渲染它们。
直到最近，随着 Windows 7 的发布和人们购买具有高分辨率显示器的计算机，这才真正成为问题。首先，Windows 7 使用 96DPI 作为默认值（这与其他计算机世界一直使用 72DPI 作为标准不同。此外，Windows 7 会自动调整 DPI 设置，我见过 DPI 为正常值 150% 的人（在 Windows 中为 96 DPI）。
这里有一个很好的链接，可以更详细地讨论这个问题：http://webkit.org/blog/55/high-dpi-web-sites/
以网络标准设计的优秀跨浏览器网站是我们的目标，但不要忘记 DPI 测试。
【讨论】：
这是一个常见但复杂的问题，遗憾的是没有单一的最佳解决方案。这完全取决于您拥有的内容类型。您可以使用流畅的布局，或针对不同的分辨率设计不同的网站（请参阅http://www.maxdesign.com.au/articles/resolution/）。有关流体设计的示例，请查看 - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
【讨论】：