在当天，800 x 600是设计的屏幕分辨率 - 可能是640 x 480.然后是1024 x 768等，等等。
但后来情况变得更糟：现在我们不仅有不同的分辨率，还有不同的宽高比。
人们使用什么策略来适应当今不断扩大的屏幕尺寸和宽高比范围？
（顺便说一句 - 我只考虑笔记本电脑/台式机硬件，当然也有智能手机和平板电脑也要考虑。）
答案 0 :(得分：31)
我知道这会引起一些争议，但无论如何我都会说：不要
请勿针对多种屏幕尺寸或宽高比进行设计。当然有一些例外：像Webmail客户端这样的重型Web应用程序肯定可以用更多的屏幕空间，并且可能足够灵活，以适应各种各样的屏幕尺寸。所述网站的移动版本具有更灵活的设计以适应令人难以置信的移动屏幕尺寸，对于具有高移动量的网站也是有帮助的。但是，如果你坚持使用所谓的“桌面网络”，那么我认为我们可以说有95％的时间需要关注比屏幕大小，分辨率和宽高比更重要的事情。
首先，让我们轻松解决这个问题。我真的不明白为什么你会如此关心宽高比 - 我们不再喜欢那么对“低于折叠”的胡言乱语了，我们呢？网络是一个垂直媒介 - 滚动将始终在网站中占有一席之地。将所有东西都放在神奇的600px线之上只是愚蠢的。
接下来，屏幕分辨率/大小：再次，我发现很难防守。
拥有大屏幕的用户通常不会最大化他们的浏览器窗口，因为他们发现大多数网站都没有利用它们。当网络适应用户时，用户也适应网络。虽然你可以说这是一个鸡和蛋的问题，但事实仍然是网站通常是为最低的共同点设计的。 我不是在捍卫这个位置，而是指向它作为当前行业的主流趋势。
某些事情根本无法解决太高或太低的问题。例如，有一小部分宽度允许人们在屏幕上舒适地阅读。任何更长的时间以及眼睛到下一行的移动量都会很烦人。太低，文字显得狭窄。网络设计为分辨率中立的事实意味着，对于那些希望建立流畅布局的人来说，矛盾的并不多。当然，min-height和max-height会有所帮助，但范围越广，您将面临越多的困难。孤立元素，流离失所的图像，耗尽的背景等等，对于使用当今技术构建的真正灵活的网站来说是不可避免的。
所以我的观点是，处理多种分辨率的最简单方法是完全忽略它 - 使用当今的技术，无论如何都没有多少选项 - 并设计最低的公分母。
答案 1 :(得分：17)
注意高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测试。
答案 2 :(得分：12)
好吧，试着保持答案不要太久，这就是我的工作。
（A）始终从最可能使用的比率/分辨率开始
如果您的平均乔会出现在现代笔记本电脑或台式机上，他可能至少有1024x768（参考：w3schools elykinnovation），那么你可以得到大约960像素的宽度（你可能想检查960grid system - 自从我第一次写这篇文章以来，有很多新的框架。 如果您的用户更有可能从移动设备或平板电脑开始，那么请先了解一下。 如果它是50％-50％，通常最好从小开始然后长大，例如。 Rock Hammer或Foundation
（B）布局：流畅与否？
如果您的网站可以从更大的宽度中受益，请从此分辨率开始选择流体设计。小心人眼不喜欢长线阅读文字，所以不要滥用流体设计;经常坚持960px，利润率很高是可以接受的。 如果你真的有更多的空间，你可能想要添加（javascript）一些额外的侧面菜单。但是设计你的网站尽可能没有JS。
（C）其他决议
最后，是时候检查一下最少使用的分辨率还是可以接受的。
（D）其他设备，比率和内容
不同比率的选择并不多;它通常意味着您在移动设备，ipad，AAA或类似设备上运行。
我的建议是......专门为这些设备设计。
在编写HTML时，请记住您将需要的内容，并记住通过语义而不是设计来执行HTML。如果可以，请使用正确的HTML5语义标记。 避免＆lt;粗体＆gt;或类似的标签，并正确使用您要使用CSS设置样式的标签和类。
使用框架！
但你仍然可以为不同的设备制作一些不同的设计。您无需在同一设计中做出响应/ /。
根据客户端的不同，有几种方法可以提供不同的CSS;你可以做到：
您可以通过遵循一些简单的规则轻松地为小型（例如移动）设备生成通用设计： 1.流体布局能够装配在非常小的宽度 2.紧凑的页眉/页脚不要太浪费太多空间 3.每页'很少，清晰的内容' 4.避免：过度影响，因为它们不能在触摸设备上工作!!!
如果您想更进一步，您必须检查各个设备的自定义设置;一个例子是iphone视口，请参阅apple ref library。
这只是为了让你入门。经验和具体需求将推动其余的！
答案 3 :(得分：5)
您的网站无法完美展现每个展示广告。即使你在一天中有足够的时间（或者我应该说是年/十年）来设计每一个可能的显示器，你都必须在每次出现新设备时都这样做。
在我的开发中，我仍然虔诚地试图避免水平滚动，这对浮动div /可变宽度div来说并不太难。但除此之外，我们真的在“有一个应用程序”的十字路口，你需要一个特殊设计的显示器。
我使用的一个策略是减少对单个显示器的依赖 - 客户可能不需要看到整个网页来执行他们的操作。您可以将功能解析为更小/更简单的网页，这些网页可以在不同大小的设备上进行更好的扩展。
在工作中，我有一点“力量”，因为它是 - 我可以开发内部网络应用程序“设计为运行...某些特定的浏览器，某些特定的显示设置等 - 使用其他配置风险自负“。这只是在让管理人员同意花费一周时间进行开发（甚至更多的升级/未来维护）之后，只是为了安抚那个拒绝使用IE的校园另一端的素食者真的不值得付出代价。在这种情况下，我们需要另一个Timmy，而不是一个更灵活的网络应用程序，在他最喜欢的非IE浏览器上看起来不错。
答案 4 :(得分：4)
这是一个常见但复杂的问题，遗憾的是没有一个最佳解决方案。这完全取决于您拥有的内容类型。您可以使用流畅的布局，或针对不同的分辨率设计不同的网站（请参阅http://www.maxdesign.com.au/articles/resolution/）。有关流体设计的示例，请查看 - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
答案 5 :(得分：3)
我认为响应式网页设计是您问题的答案。看看这些示例和技术...... Responsive Web Design