网页的宽度到底该如何决定？

@潘团子：上次写了关于网页设计的问题，在评论区有很多小伙伴都对网页设计的尺寸提出了疑问，我们今天就来说说关于网页尺寸的讨论。

PC端的设计对于很多从事UI行业的新人来说是个充满未知的领域，对于基本的画布创建、规格设置，都处于两眼一抹黑的状态，很多设计师在创建画布的时候，就已经是第一个困扰的问题了。

特别是我们在网上找相关的问题时，得到的结果有很多种版本，而真的开发实现时又会遇到很多的问题，这也使我们更加的迷茫。其实对于网页设计的宽度设置是没有绝对固定的值，是根据我们需求出发的。

网页的宽度主要分为两种：

• 定宽：内容区域宽度固定
• 自适应：内容区域宽度跟随浏览器变化

定宽模式

1、显示器设备

在定义网页宽度时，我们第一件事是考虑我们的受众用的显示器。显示器基本都是从 1024px 起始的，虽然这个分辨率的显示设备已经不多了（虽然我们公司就有很多，都是正方形的），我们就要根据客观条件考虑自己要支持最低的分辨率。

比如说现在常见的PC分辨率有1280*800、1600*900、1440*800、1366*768、1920*1080，目前来说设备中使用率最多的是1920的，如下图所示：

2、定义内容区域

定义内容区域有两种办法，一种是用栅格：（ W =（a×n）+（n-1）i ）得到严谨实用的内容宽， 如下图所示：

1、自适应网站

它是根据你使用的访问设备来自动调教分辨率使得你看的页面相同，目的在于为了符合访客的浏览。如下图所示：

2、响应式网站

是一个能够兼容多个终端的网站，不是为每一个终端做一个特定版本的网站。通俗的说，就是做一个网站能够适应多种设备，而不用为每个设备做一个特定的版本，并且在不同的设备上展示的模式也会不一样，能够为用户提供更舒适的界面和更好的浏览体验。

3、如何选择

响应式网站较为简单，设计师只要画一个界面就可以了，布局可以通过设定来自行调整。

而自适应网站设计师者要做两套或者多套不同的网页界面，以满足所有市场用户，比如说手机端可能就要重新设计了。

但是响应式的网站只适合比较简单的风格，面对一些比较复杂的框架结构就比较难以实现了，由于局限性比较大，实际项目的开发市场可能还不如自适应的网站，自适应往往就考虑几种状态，不需要长期考虑网站建设大小问题，因此你会发现自适应比响应式会更符合企业建站需求。