题
假设流体布局不是一个选项(因为这是一个不同的讨论),网站布局的建议宽度是多少?不同尺寸的优点和缺点是什么?
解决方案
我总是使用 960px
,因为它可以在 1024x768
上查看,并且可以被2,3,4,5,6,8,10,12完全整除,15,16,20,24,30,32,40,48,60,64,80,96,120,160,192,240,320和480 ...所以我可以拆分我的网站的设计(干净地使用三分法则。
几年后编辑: 请考虑使用 CSS媒体查询,让您的内容响应无数的设备现在,如果你不能使用流体布局。我不确定在2012年可以声称一个像素宽度来统治它们。
其他提示
查看 http://browsersize.com ,了解当前用户使用的屏幕分辨率的快速统计数据。您可以使用 http://setmy.browsersize.com 快速调整浏览器大小以模拟在特定屏幕分辨率。确保您的布局至少满足最广泛使用的屏幕分辨率(1024 x 768)。
此外,不一定要占用最大水平空间。文本的宽度(每行的单词数)理想情况下不应超过可用性的某个阈值:
在非常常见的1024× 768屏幕上 分辨率,大多数固定布局网站 不要使用所有可用空间 左右内容。 灵活的布局可以更好地利用 横向空间,但努力 保持可用的线长。 可用性专家告诉我们 你说的话太多了 应该排队。 8到12之间 单词似乎是理想的路线 长度。特别是印刷媒体 报纸,不要犹豫甚至使用 线条较短。为什么?因为他们可以, 通过在几个文本之间布置文本 列。
如果您使用比最小屏幕可能更宽的固定宽度来访问您的网站,您将会惹恼并挫败必须向侧面滚动以获取其他内容的用户。
我还使用950到980px之间的布局,除非客户要求,否则始终居中:)
-
请注意,统计信息中经常引用的监视器分辨率与浏览器窗口的内部宽度不一定相同。用户可能有其他侧边栏/工具栏,使用非最大化的浏览器窗口。屏幕越大,您只想在一页上使用它的可能性就越小。
-
很长的文字行很难阅读。最佳值为25-30em(取决于很多因素,但你不应该只追求最大值)。
-
移动浏览器具有“虚拟”功能。用于缩放的屏幕分辨率在Opera Mini / Mobile和Mobile Safari中为~960px。
醇>
我投票将议案分开。仅仅因为屏幕尺寸为X并不意味着X或任何接近它的东西都是您网站的最佳设计。
您的网站目的与您选择的宽度有很大关系。
许多营销专家认为更狭窄的专栏“转换”。更多的销售访问。也许这是因为如果页面很窄,引导人们的注意力会更容易。
另一方面,专用于图像的网站应以每个访问浏览器的最佳可用分辨率显示。
曾经 800px
;但是,越来越多的网站开始使用 1000px
。这是因为访问者的低端分辨率往往是 1024x768
。额外的24个像素为您可能想要操作的浏览器镶边,填充和边距留出空间等。
只是为了给出一些看法,即使是新一代上网本的小屏幕也具有 1024x768
的分辨率。
但是,最重要的是,要了解@warren建议的观众并利用它。
您可以尝试开发多个布局,并根据访问者的窗口使用Javascript在它们之间切换.innerWidth
那就是说,我通常使用介于950px和980px之间的东西。
根据这些统计数据,至少1024像素宽将覆盖大多数用户