PC端的页面的时候，一般设计图都是设计多大的？

Question

请问大家在做管理后台PC端的页面的时候，一般设计图都是设计多大的？

我让他设计的是1920*1080，但是出现一个问题，根据尺寸设计出来之后，整体效果和设计图不对，因为浏览器这边有导航栏，再加上后台框架占用一些，导致最后展示的内容就很少，这种应该怎么去调配呢？

Answer 1

一般来说就默认是 1920*1080，因为大部分的情况都是需要做自适应布局的，所以这个时候是不是高度 1080 都是没关系的，因为是允许主体内容区域上下滚动。

如果说首页有单独的需求，比如说需要一屏展示完整，那么就需要单独和UI沟通，调整不同屏幕分辨率下的布局（比如说正常情况下的PC缩放100%，PC缩放125%，PC缩放150%），或者确保关键信息可以再首屏展示完全。
这个得看实际情况，也可能会和PM或者实际用户沟通交流。因为不同的浏览器的可用视口并不一样，所以需要给到足够可以调整的留白空间，这样即使可用视口高度不足我们也可以通过各种适配方案给出解决方案。

Answer 2

常规下处决与你项目决定兼容最小多大屏幕的尺寸,一般推荐尺寸是宽度1920px，高度最小是1080px,主体内容在1200px内就行，比较规范。而看你描叙,设计图其实没算后台框架这些,这个你可以减减之后再让设计出图,高度其实还好,主要是要宽度算好

Answer 3

设计只是理想状态下的结果，但是用户设备、浏览器也是各种各样，这是需要前端程序员来适配不同分辨率。

css如下：

/*最小屏幕分辨率为1280px且最大为1440px*/
@media (min-width: 1280px) and (max-width:1440px) {

}
/*最小屏幕分辨率为1440px且最大为1680px*/
@media (min-width: 1440px) and (max-width:1680px) {

 }
/*最小屏幕分辨率为1920px*/
@media screen and (min-width:1920px) {

}

或者更大的大屏，比如指挥中心，展示数据大屏等等

设计人员仅仅需要按大众普遍分辨率设计就行了。而且UI设计师也懂 特别是图标icon 有1倍 2倍 3倍切图。如果非要一模一样，在浏览器上按F11就是最理想状态的1：1产出。

特别说明：
如：360浏览器 导航栏+地址栏 = 30px 右边滚动条是17px 极度理想可视分辨率是1900*900
但是人家用谷歌浏览器你怎么办？可视分辨率又不一样。
且有的人用户眼睛不行，他自己人为放大分辨率到150%。那设计师以及前端程序员只能做大众，不能为这一个人要单独开发一套界面。