PC端网页尺寸设计一

最近要写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寸。

二、有效可视区域

当下比较流行的屏幕分辨率有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在设计的时候会按比例显示，缩小或者放大，第二：固定主要部分的尺寸，然后旁边留空，小的浏览器就放满，大的浏览器就留白比较多，第三：根据不同尺寸做不同设计方案，这种就比较麻烦了，现在主要是依据第二种，有一部分主要的是固定不变的，当分辨率变化的时候内容会跟着分辨率的宽度来变化，有时候设计的时候图标和图片也会随之而变，这需要前端在代码上作调整。

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