推荐的网站分辨率(宽度和高度)? [英] Recommended website resolution (width and height)?
问题描述
常见的网站解析有标准吗?
Is there any standard on common website resolution?
我们的目标是更新的显示器，可能至少 1280 像素宽，但高度可能会有所不同，而且每个浏览器的工具栏高度也可能不同.
We are targeting newer monitors, perhaps at least 1280px wide, but the height may varies, and each browser may have different toolbar heights too.
这有什么标准吗?
推荐答案
这些天的建议是:
针对 1024x768 进行优化.对于大多数网站，这将涵盖大多数访问者.大多数日志显示 92-99% 的访问将超过 1024 次.虽然 1280 越来越普遍，但在 1024 和一些低于 1024 处仍有很多.对此进行优化，但不要忽略其他.
Optimize for 1024x768. For most sites this will cover most visitors. Most logs show that 92-99% of your visits will be over 1024 wide. While 1280 is increasingly common, there are still lots at 1024 and some below that. Optimize for this but don't ignore the others.
1024 = ~960.考虑滚动条、窗口边缘等意味着 1024x768 屏幕的实际宽度是 大约 960 像素.一些工具基于略小的尺寸，大约 940.这是 twitter bootstrap 中的默认容器宽度.
1024 = ~960. Accounting for scrollbars, window edges, etc means the real width of a 1024x768 screen is about 960 pixels. Some tools are based on a slightly smaller size, about 940. This is the default container width in twitter bootstrap.
不要为一种尺寸而设计.窗口大小各不相同.不要假设屏幕大小等于窗口大小.设计一个合理的最小值，但假设它会调整.
Don't design for one size. Window sizes vary. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.
使用响应式设计和流畅的布局.使用将在调整窗口大小时进行调整的布局.人们经常这样做，尤其是在大显示器上.这只是良好的 CSS 实践.有几个前端框架支持这一点.
Use responsive design and liquid layouts. Use layouts that will adjust when the window is resized. People do this a lot, especially on big monitors. This is just good CSS practice. There are several front-end frameworks that support this.
将移动视为一等公民.您一直在从移动设备获得更多流量.这些引入了更多的屏幕尺寸.您仍然可以针对 960 进行优化，但使用响应式网页设计技术意味着您的页面将根据屏幕大小进行调整.
Treat mobile as a first-class citizen. You are getting more traffic from mobile devices all the time. These introduce even more screen sizes. You can still optimize for 960, but using responsive web design techniques means your page will adjust based on the screen size.
记录浏览器显示信息.您可以获得有关此的实际数字.我在这里和此处 和 此处.您还可以操纵您的网站来收集相同的数据.
Log browser display info. You can get actual numbers about this. I found some numbers here and here and here. You can also rig your site to collect the same data.
用户会滚动，所以不用太担心高度.旧的论点是用户不会滚动，任何重要的东西都应该在首屏".这在几年前就被推翻了.用户滚动很多.
User will scroll so don't worry much about height. The old argument was that users wouldn't scroll and anything important should be "above the fold." This was overturned years ago. Users scroll a lot.
有关屏幕分辨率的更多信息:
More about screen resolutions:
有关响应式设计的更多信息:
More about responsive design:
- 响应式网页设计(2010 年，5 月 25 日)，Ethan Marcotte, 一个列表.
- 响应式网页设计在维基百科
- 多设备布局模式(2012 年 3 月 14 日)Luke Wroblewski.为自适应多设备屏幕布局列出最流行的模式.
- Responsive Web Design (2010, May 25), Ethan Marcotte, A List Apart.
- Responsive Web Design at Wikipedia
- Multi-device layout patterns (2012, Mar 14) Luke Wroblewski. Catalogs the most popular patterns for adaptable multi-device screen layouts.
用于响应式设计和流动布局的工具和前端框架:
Tools and front-end frameworks for responsive design and liquid layouts:
- Twitter 引导程序
- Zurb 基金会
- 50 款出色的响应式网页设计工具(2012 年), 4 月 24 日) 丹尼斯·雅各布斯 &彼得·加斯顿
- Twitter Bootstrap
- Zurb Foundation
- 50 fantastic tools for responsive web design (2012, April 24) Denise Jacobs & Peter Gasston
这篇关于推荐的网站分辨率(宽度和高度)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
