网页设计的宽度到底应该定多少?我们用统计数据来说话。
百度统计流量研究院对于2017年上半年的分辨率使用情况统计得出。
排名第一的是360×640,这是竖屏,一般在医院、学校中才能见到,暂且不谈。
排名第二的是1920×1080,占比13.07%。
1366×768排第三,占比6.32%。这说明现在主流的电脑分辨率是1920×1080。
排名第七的分辨率,1024×768,是最小的电脑尺寸了,仅占3.13%,很少有人使用。在做pc端的网页设计时,不用考虑这个尺寸,而应在做pad端和手机端的适配时,将其纳入考虑。
比如,我所在的公司现在做的适配是:当分辨率宽>1200px时,采用pc端的样式;当分辨率宽<1200px时,采用移动端的样式,即pad端和手机端的样式一致。
而更高级的响应式网站应该是在严格的栅格规范下,适应于不同宽度,确保各宽度下的展示效果。但这样的成本也会相应增加,在开发网站时,需综合考虑实际需求和开发成本。time(《时代周刊》官网)是个很好的响应式网页案例。
除了统计数据以外,还需要将产品的目标用户纳入分析。技术型公司面对的用户是高端技术人才,这类人物的显示器分辨率不会太低;如果目标用户是一二线城市的人,那么也优先考虑主流分辨率。
所以在做网页设计时,最好将宽度规定为1200px,主要内容都在1200px的范围内展示,既能确保主流分辨率的展示效果,又不会影响较低分辨率下的效果。
举个栗子,以下两图分别为腾讯云在小屏(1280×1024)的显示器和大屏(1920×1080)的显示器下的展示效果。
那么,除了宽度问题,高度怎么定也是关键,这涉及到每一屏展示的效果,是全屏铺满还是只占半屏?这就涉及到了浏览器的高度,而非显示器的高度。
表中的安全高度即网页在浏览器中每一屏的最大高度,所以如果想把内容控制在一屏之内,高度就不要超过最大高度。
在设计时,掌握好这些规范,能大大提高工作效率、降低修改率,共勉。