Web设计规范（最佳分辨率）

随着时代的发展，电脑显示屏的分辨率越来越大。下面我们一起来分析下，结合现在市场上PC分辨率占比情况，设计尺寸应该定为多少合适。

主流分辨率：  https://tongji.baidu.com/research/site 

下图是百度统计的2020年4月主流分辨率占比情况，我们可以得出主流的PC分辨率。

 

那么网页的设计宽度定为多少合适呢？那就要从定宽跟自适应两种情况来考虑了。

定宽模式：

定宽，内容区域固定宽度。在定宽模式下，主流的内容宽度是960px/1200px等，视不同的设计需求，选择不同的宽度。分为下面三种情况：

1. 如果是针对特定显示屏的设计，例如只针对1440*900px的显示屏，则按照这个宽度的设计标准进行设计即可。

2. 如果是设计一个面向年轻群体的网站，基本可以放弃低分辨率的用户，按照1366px宽的设计标准进行设计。内容宽度用1200px。

3. 如果是要设计一个满足所有人使用的网站，就需要考虑到1024px宽的用户。内容宽度用960px。

问题1：为什么内容宽度会小于显示屏宽度呢？

因为受浏览器滚动条等因素的影响，需要在内容两边进行留白，以保证大部分用户的使用舒适度。

问题2：为什么内容宽度是960px，而不是1000px或其他？

因为960px可以更好的运用于栅格布局。栅格系统不仅可以帮助设计师进行规范的设计，还能使多名设计师协作起来更方便。选择1200px也是同样的道理。

自适应模式：

自适应，内容区域宽度随着浏览器变化而变化。在这种模式下，可以使用1920px或者更大的宽度来做设计，给出模块拉伸的方案。然后，给出最小宽度效果、超出的应对措施。

1． 最小宽度效果：定义一个最小宽度，出一版设计，来展现极限情况下的视觉效果。

2． 超出的应对措施：如今，2k、4k显示屏越来越普及，要考虑超过1920px的应对措施，如背景拉伸要填满屏幕。

首屏高度：

为什么要确定首屏高度？

世界著名的网页易用性专家尼尔森曾经有报告显示，首屏以上的关注度为80.3%，首屏以下的关注度仅有19.7%。这足以表明首屏的重要性。

 

上图是2020年5月的主流浏览器占比情况，结合主流分辨率占比、主流浏览器的占比及浏览器高度进行分析计算。

套用上方数据进行计算可得，最低首屏高度580px，主流首屏高度710px。这两个高度可根据设计需求进行选择。