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

Question

过去，800 x 600 是设计的屏幕分辨率 - 也许是 640 x 480。然后出现了 1024 x 768，等等，等等。

但随后情况变得更糟:现在我们不仅有不同的分辨率，还有不同的纵横比。

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

(顺便说一句 - 我只考虑笔记本电脑/台式机硬件，但当然也有智能手机和平板电脑需要考虑。)

Answer 1

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

不要针对多种屏幕尺寸或纵横比进行设计。当然也有一些异常(exception):像 webmail 客户端这样的重型 web 应用程序肯定可以使用更多的屏幕空间，并且可能足够灵活以适应大范围的屏幕尺寸。所述网站的移动版本具有更灵活的设计以适应令人难以置信的移动屏幕尺寸范围，这对于移动量大的网站也有帮助。然而，如果你坚持所谓的“桌面网络”，那么我认为我们可以说 95% 的时间有比屏幕尺寸、分辨率和宽高比更重要的事情需要关心。

首先，让我们解决简单的问题。我真的不明白为什么您会如此关心纵横比 - 我们不再那么关心“非首屏”的废话了，是吗？网络是一种垂直媒体 - 滚动将始终在网站中占有一席之地。让一切都超过神奇的 600 像素线是愚蠢的。

接下来，屏幕分辨率/尺寸:同样，我发现很难防御。

拥有大屏幕的用户通常不会最大化他们的浏览器窗口，因为他们发现大多数网站都没有利用它们。在网络适应用户的同时，用户也在适应网络。尽管您可能会说这是先有鸡还是先有蛋的问题，但事实仍然是网站通常是为最小公分母设计的。 我不是在捍卫这个立场，而是指出这一点成为当前行业的主流趋势。

有些东西在分辨率太高或太低的情况下根本无法工作。例如，有一个小范围的宽度可以让人们在屏幕上舒适地阅读。再长一点，眼睛移动到下一行的次数就会很烦人。太低，文本会显得局促。 Web 被设计为分辨率中立的事实意味着矛盾的是，没有为那些希望构建流体布局的人提供很多规定。 min-height 和 max-height 当然会有所帮助，但是范围越大，您将面临的困难就越多。对于使用当今技术构建的真正灵活的网站来说，孤立元素、移位的图像、用完的背景等问题是不可避免的。

所以我的观点是，处理多种分辨率的最简单方法是完全忽略它 - 就今天的技术而言，反正没有多少选择 - 并为最低公分母进行设计。