Skip to content

向客户解释为什么要提供宽为 960或1200的设计稿 #28

Description

@abeet

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

1920x1080      41.23%
1366x768       22.00%
1440x900       15.77%
1024x768       11.20%
1600x900        8.30%
1280x800        0.73%
2560x1440       0.10%
其他            0.63%

从统计来看
-要让绝大多数(约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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions