向客户解释为什么PC端网页要提供宽为 960或1200的设计稿
CSS

向客户解释为什么PC端网页要提供宽为 960或1200的设计稿

朱治龙
2017-12-02 / 0 评论 / 41 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月07日,已超过1342天没有更新,若内容或图片失效,请留言反馈。

一个网页的尺寸和浏览器及显示器的尺寸大为相关,我们不可能满足所有用户的显示器尺寸,我们能做的是让绝大多数用户在访问网站时没有横向滚动条。
需要统计客户的显示器分辨率,以百度近六个月的浏览器统计数据为例:

1920x1080      44.5%
1366x768       10.19%
1440x900       8.27%
1536x864       7.22%
1600x900        6.43%
1280x720        4.31%
1024x768       3.27%
其他            15.81%

kodthhm9.png

从统计来看

-要让绝大多数(约99%)的PC用户浏览网站没有横向滚动条,网页宽在1024以下,可以是960像素,960是2、3、4、5、6的公约数,980是2、4、5、6、7的公约数。
-要页面美观大气,兼顾大部分(约80%)PC用户浏览网站没有横向滚动条,网页宽在1366以下为佳,可以是1170/1200/1260像素。1170是2、3、5、6的公约数。1200是2、3、4、5、6的公约数。1260是2、3、4、5、6、7的公约数。

建议

  • 在不做响应式设计的情况下,提供宽1200分辨率的设计稿,并以像素为单位标注尺寸
  • 在做响应式设计的情况下,分别提供宽360(手机)、宽750(平板)、宽960(横向平板或窄屏PC)、宽1200(PC),四种尺寸下的设计稿。并以像素为单位标注尺寸
  • 以上宽指的是页面主体内容宽,在PS里设计时画布要更宽一些用于示意两侧留白效果 360/400 750/800 960/1260 1200/1600 1800/2400
0

评论 (0)

取消