最近要写UI设计规范，先研究一下网页设计里的尺寸问题。

一、分辨率

网页设计的尺寸主要和两个因素有关，一个是电脑显示器的分辨率，还有浏览器的分辨率，其实还有一些操作系统，Windows或者Mac os或者其他的。什么叫分辨率呢，比如说1024×768的，就是横向有1024个像素，竖向有768个像素，整个屏幕可以看成是一个象棋盘，屏幕的尺寸是14寸还是15寸的，这个尺寸是不会变的，电脑是多大就是多大，变化的是电脑设置的分辨率，如果相同尺寸的屏幕，分辨率越大画面就越精细，比如我的电脑，如下图：

第一张，分辨率是800×600的，显而易见，图标变得特别大，特别模糊，第二张是1920×1080的，看起来正合适，因为我的电脑分辨率就是这个，电脑是多少寸的就是指屏幕的对角线长度，再有，如果两台设备都是19寸的，16：9和4:3的屏也是不一样的，4:3的较大一些。

在这普及一个小知识，寸和英寸的换算，英寸是英式的，寸是中式的，1英寸＝2.54厘米，1寸等于3.3厘米，1英寸＝0.762寸。

二、有效可视区域

网页设计如果使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计，一般采用全屏展示和两侧留白的方式。 全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。 两侧留白是为了适配不同电脑屏幕的尺寸，能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域，内容限时区域在好控制在1000px-1200px。当下比较流行的屏幕分辨率有1024×768,1366×768,1280×800,1280×1024，1440×900,1600×900，1920×1080等。设计网页时要考虑好浏览器的分辨率，主流的浏览器有IE,谷歌，火狐，欧朋等。

什么叫浏览器的有效可视区域呢，在我理解就是显示内容的地方，比如打开一个网页后，刨除浏览器的工具栏和侧边栏等，真正显示内容的地方，如下图：

我电脑里的浏览器是IE11，有效可视区域是画红框的部分，每个浏览器都有自己不同的有效可视区域，如下面的表格

（谷歌的是宽度减去23）

800×600的已经不用考虑了，主流的是1024×768，现在主流的浏览器还是以IE为主，所以在设计网页的宽度的时候保守的还是考虑1003px,在1024×768的分辨率下，1003就是IE浏览器的有效可视区域的宽度，但是现在越来越多的宽屏正在逐渐占据市场，所以我个人建议使用1280或者1366的，有效可视区域按照IE的来计算，1280的就是1259，1366的就是1345，如果遇到别的分辨率，可以做自适应的调整，现在越来越多的网页设计的宽度都不是固定不变的，这是一个流行的趋势，如下图：

第一张是我正常的全屏显示，第二张是我把浏览器的长宽调整了，设计时考虑三种情况，第一：固定网页尺寸，IT在设计的时候会按比例显示，缩小或者放大，第二：固定主要部分的尺寸，然后旁边留空，小的浏览器就放满，大的浏览器就留白比较多，第三：根据不同尺寸做不同设计方案，这种就比较麻烦了，现在主要是依据第二种，有一部分主要的是固定不变的，当分辨率变化的时候内容会跟着分辨率的宽度来变化，有时候设计的时候图标和图片也会随之而变，这需要前端在代码上作调整。

三、主流浏览器的界面参数

写在最后，那么pc端页面设计图片到底要选择多大尺寸比较合适呢？

文字大小又设置成什么样的会比较合适？

搞前端的都会遇到这些问题。

如果做全屏页面，假如设计图尺寸是1920*960px（960是chrome浏览器可视区域的尺寸），然后页面中所有关于尺寸相关的样式，全部用jq进行控制。

原理如下：

　　1.获取当前浏览器的可视区域宽度w，计算比例系数I=w/1920；

　　2.在分辨率1920*1080的显示器下将页面绘制完毕，然后将所有关于尺寸的数据乘以系数I。

效果：这样的页面就如同看一张图片一样，不论显示器多宽，模块间始终保持不变。

如果不做全屏，或者严格讲主要区域不做全屏设置，可以固定中宽，比如bootstrap的container的固定宽度1170px（大于1200px一致设置为1170px）。

用我们的H5建站系统，就一个网站后台全搞定，一次建站=PC建站+手机网站+公众号+百度小程序+微信小程序+SEO推广+熊掌号+微博，自适应各种PC电脑、各种平板电脑、各种型号手机等设备，方便您快速搭建网站。如果需要精美网页设计或网站定制开发也可找到我们。这样可以为您节省大量琐碎的时间，利用这个时间可以去做更专业的业务。