2012年首选的布局宽度

时间:2012-04-18 13:34:59

标签: html css layout width screen-resolution

我正在开发新的网络应用程序但仍然无法决定我应该选择的布局宽度。该应用程序基于Twitter Bootstrap的库,目前我使用默认网格系统(12列),宽度 1170px

在显示器上(我假设大多数人的宽度分辨率高于1280像素)看起来应用不错,在我的MacBook PRO上也一样,但是我担心用户有点老旧的笔记本电脑,其中宽度分辨率大多是 1024px ,并且看不到整个布局(并且会看到水平滚动条)。

所以,我想问你的意见。您是否已优化分辨率的布局> 1280px 或者您仍然使用res来反映用户。 1024px 并在这种情况下使用宽度 960px 进行布局?

4 个答案:

答案 0 :(得分:5)

您应该使用媒体查询来更改较小分辨率的布局。在我的工作场所,有几个1024像素宽的显示器。此外,人们经常在纵向模式下使用平板电脑(IIRC,只有1024像素)。当然,的人可以将平板电脑侧身看到整个事物,但很多人不会因为纯粹的懒惰或没有意识到它会解决问题。

如果你只想设计一个分辨率(读:你不应该这样做),那么我就不会建议大于1024像素宽的东西。对于某些统计数据,我们网站流量的大约15-20%使用1024像素或更小宽度的显示器。

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

答案 1 :(得分:1)

根据W3Counter's Global Stats,15%的显示器为1024x768,56%的显示器宽度至少为1280px。我认为15%仍然太高,不能用1170px作为布局。

答案 2 :(得分:1)

就个人而言,我开发的是1024px及以上的台式机。我使用media queries来检测移动设备并提供替代布局。

正如SupremeDud在his answer中指出的那样,15%的显示器仍然是1024x768,这是一个相当大的市场份额。

就像素宽度而言,我的基本设计大约为960px。您可能希望查看960.gs,但我不确定它如何与Bootstrap一起使用。

答案 3 :(得分:1)

液体或响应式布局怎么样?这样,您可以涵盖所有分辨率和窗口大小。