Css Web开发中处理多屏幕分辨率和纵横比的策略

在当时，800 x 600是设计的屏幕分辨率，可能是640 x 480。然后出现了1024x768等等等等

但更糟糕的是：现在我们不仅有不同的分辨率，还有不同的纵横比

人们使用什么策略来适应当今不断扩大的屏幕大小和纵横比范围

---

（BTW-我只想到笔记本电脑/台式机硬件，但当然也有智能手机和平板电脑要考虑。）

< P>这是一个常见但复杂的问题，不幸的是没有一个最佳的解决方案。这完全取决于你拥有的内容类型。您可以使用流体布局，也可以根据不同的分辨率对站点进行不同的设计（请参见）。有关流体设计的示例，请查看此项-

注意高DPI设置

我认为当前前端web开发面临的最未讨论的问题之一是在高DPI系统上进行测试。每个人都学会了在不同的浏览器上测试、测试、测试，但设计师/开发人员还没有学会在不同的DPI设置上测试

当字体缩放但图像没有缩放时（可能发生这种情况），高DPI设置（或者甚至低DPI设置）会破坏设计，会导致图像看起来模糊/模糊，绝对定位的对象可能不会出现在所需位置（这对CSS菜单来说是毁灭性的）。如果没有其他设置，在高DPI下测试图像，并根据需要重新渲染

直到最近，随着Windows7的发布和人们购买高分辨率显示器的电脑，这才真正成为一个问题。首先，Windows 7使用96DPI作为默认设置（这与其他计算机世界一直使用72DPI作为标准的情况不同。此外，Windows 7将自动调整DPI设置，我见过DPI为正常值150%的人（Windows中为96DPI）

这里有一个很好的链接，详细讨论了这个问题：

---

我们的目标是设计一个符合web标准的优秀跨浏览器网站，但不要忘记DPI测试。

我知道这会是一个有点争议的观点，但我还是要说：不要

不要设计多个屏幕大小或宽高比。当然也有一些例外：像webmail客户端这样的大型web应用程序肯定可以有更多的屏幕空间，而且可能足够灵活，可以适应大范围的屏幕大小。上述网站的移动版，具有更灵活的设计以适应手机屏幕尺寸的惊人变化对手机流量大的网站也有帮助。然而，如果你坚持使用所谓的“桌面网络”，那么我认为95%的时间里，我们需要关心的事情比屏幕尺寸、分辨率和纵横比更重要

首先，让我们来解决一个简单的问题。我真的不明白为什么你会如此关心纵横比-我们不再关心那些“低于折叠”的废话了，是吗？网络是一种垂直媒体-滚动在网站上总是有一席之地。拥有神奇的600px线以上的一切简直是愚蠢身份证

接下来，屏幕分辨率/大小：我再次发现很难辩护

大屏幕的用户通常不会最大化他们的浏览器窗口，因为他们发现大多数网站都没有利用它们。当网络适应用户时，用户也会适应网络。虽然你可以说这是一个鸡和蛋的问题，但事实仍然是网站通常是为最低的c设计的ommon分母。我不是在为这一立场辩护，而是指出这是当前行业的主流趋势

---

有些东西的分辨率太高或太低都无法使用。例如，有一个小范围的宽度可以让人们在屏幕上轻松阅读。再长一点，眼睛移动到下一行会让人恼火。分辨率太低，文本就会显得局促。事实上，网页被屏蔽了设计为分辨率中性意味着，矛盾的是，对于那些希望构建流畅布局的人来说，没有太多规定。

min height

和

max height

当然会有所帮助，但范围越广，你将面临的困难就越多。例如孤立元素、置换图像、背景耗尽等等c、 对于使用当今技术构建的真正灵活的站点来说，这是不可避免的

---

因此，我的观点是，处理多分辨率的最简单方法是完全忽略它——在今天的技术中，选择的选项并不多——并设计最低公分母。

好吧，尽量让答案不太长，我就是这么做的

（A）始终从最可能使用的比率/分辨率开始

如果你的普通joe将使用现代笔记本电脑或台式机，那么他可能至少拥有1024x768（参考文献：），这将为你提供大约960px的可用宽度（你可能需要检查-自从我第一次写这篇文章以来，有很多新的框架）。 如果你的用户更倾向于从移动设备或平板电脑开始，首先要了解他们。 如果是50%-50%，通常最好从小处做起，然后长大，例如：或

（B）布局：是否流畅？

如果您的网站可以从更大的宽度中受益，请选择从该分辨率开始的流体设计。请注意，人眼不喜欢阅读长线文本，因此不要滥用流体设计；通常，使用960像素的大边距是可以接受的。 如果你真的有更多的空间，你可能想添加（javascript）一些额外的侧菜单。但是，设计你的网站时尽可能不使用JS

（C）其他决议

<