用统计数据告诉你网页设计的宽度应该怎么定

网页设计的宽度到底应该定多少？我们用统计数据来说话。

数据来源于百度统计

百度统计流量研究院对于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）的显示器下的展示效果。

小屏

大屏

那么，除了宽度问题，高度怎么定也是关键，这涉及到每一屏展示的效果，是全屏铺满还是只占半屏？这就涉及到了浏览器的高度，而非显示器的高度。

显示器分辨率与浏览器宽高的关系

表中的安全高度即网页在浏览器中每一屏的最大高度，所以如果想把内容控制在一屏之内，高度就不要超过最大高度。

在设计时，掌握好这些规范，能大大提高工作效率、降低修改率，共勉。