移动端H5页面的设计稿尺寸大小规范

那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

请注意：（以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下） 也就是我们的H5页面前端代码里面必须包含

根据目前市场流行的手机移动终端，统计他们的设备独立像素。

在这里，25学堂也跟大家分享一个罗列了当前最流行的手机的所有尺寸大小规范：http://screensiz.es/phone值得大家好好细看的智能手机尺寸图表。

也只有iPhone6+采用了分辨率降频处理。

8. 静态图尽量保存成png8、或者进行图片压缩，在线png图片压缩工具很多。

这是一张1M的图片用PS压缩成jpg、png8、png24的体积对比。需要补充的是Png8最多只能展示265种颜色，而png24能有1600万。

所以色彩单一时用png8，色彩丰富时用jpg，需要追求精度时用png24。

9. 无损压缩图片可用网站

大家都知道的TinyPNG 和业界好口碑的智图。

手机APP设计必备图片压缩神器-TinyPNG

推荐一个APP切图文件的PNG压缩工具-Pnggauntlet

10. 图片避免大小重设

根据需求上传相应尺寸图片，避免大小重设，不宽于640像素（基于手机屏幕一般宽度），避免造成图片质量剩余。

11、善于用H5工具匹配多终端

H5中背景图片宽度固定为640px，那如何匹配高度呢？

如果你用的是H5制作工具——ih5.cn，就能够解决。

打开ih5.cn，在舞台下添加【移动设备】功能，设置不同方案的高度，案例就可以根据终端设备自动跳转到对应的方案去浏览。这种方法需要重复设计多种尺寸的图，堪称累倒设计师的方法。

偷懒的设计师们用的是——将设计文档统一按照最大方案也就是640*1040px来创建，然后添加一个移动设备，选择默认高度，在设计文档时记得将主要的信息放在中间，重要的按钮尽量往中间放。