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