2012年布局的首选宽度是多少？

Question

我正在开发一个新的Web应用程序，但还无法决定应选择哪种布局宽度。应用程序基于Twitter Bootstrap库，并且目前我使用默认的栅格系统（具有12列），其宽度为1170像素。

在显示器上（我假设大多数人的分辨率宽度高于1280像素）上，应用程序看起来不错，我的MacBook PRO也是如此，但我担心那些使用稍旧笔记本电脑的用户，这些计算机的宽度分辨率大多为1024像素，他们将无法看到整个布局（并且会看到水平滚动条）。

因此，我想请问您的意见。您是否已经针对分辨率>1280像素优化了布局，或者仍然考虑适应分辨率为1024像素的用户，并在这种情况下使用960像素的布局宽度？

- user984621

Answer 1

您应该使用媒体查询来针对较小的分辨率更改布局。在我的工作场所，有几个显示器的宽度为1024像素。此外，人们经常在纵向模式下使用平板电脑（据我所知，只有1024像素）。当然，这个人可以旋转他们的平板电脑来查看整个页面，但许多人不会出于懒惰或没有意识到这会解决问题。

如果您只想设计一个分辨率（读取：您不应该这样做），那么我不建议超过1024像素的宽度。根据一些统计数据，大约15-20％的网站流量使用的显示器宽度为1024像素或更小。

还应注意的是，即使对于具有1280像素或更宽的显示器的用户，许多用户也不会最大化其浏览器窗口。这在Mac用户中尤其常见，但也可以在Windows / Linux用户中找到。

- 0b10011

---

是的，我更新了我的布局大小并对1024px的分辨率进行了优化，当然，我还必须检查一下媒体查询，这是我以前从未使用过的。 - user984621

Answer 2

根据 W3Counter's Global Stats 的数据，15％的显示器分辨率为1024x768，而56％的显示器宽度至少为1280px。我认为15％仍然太高了，无法仅使用1170px作为布局。

- SupremeDud

Answer 3

就我个人而言，我为桌面开发1024像素及以上的分辨率。我使用媒体查询来检测移动设备并提供另一种布局。

正如SupremeDud在他的回答中所述，15%的显示器仍然是1024x768，这是一个相当大的市场份额。

就像960.gs一样，我基于960像素的宽度设计。不过你可能需要看看960.gs，虽然我不确定它与Bootstrap的兼容性如何。

- Bojangles

Answer 4

使用流式或响应式布局如何？这样您就可以覆盖所有分辨率和窗口大小。

- CodeVirtuoso