移动端H5页面的设计稿尺寸(下)

在平时做手机端H5网页设计稿时,UI设计师和前端工程师肯定会纠结过:那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

在上篇文章中,我介绍了设备独立像像素、CSS像素和屏幕物理像素之间的关系。那么在前端布局(viewport设定content=”width=device-width”)时,样式尺寸就可以用设备独立像素(设备独立像素从数字上等同于CSS像素)的尺寸范围来进行设定各个元素的大小。

那么从上面所得出的结论,是否就可以断定设计稿直接按照设备独立像素来定就行了呢?且看下面的分析。...

移动端H5页面的设计稿尺寸(上)

由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行。在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设计(注意H5网页区别于APP,APP的设计稿直接按照手机分辨率来设计)?那么对于现在2K屏幕的手机,应该如何制作设计稿和前端稿呢?

由于文章篇幅原因,结论先行:

1、像素是没有宽高的(不要被Photoshop中的像素格欺骗),它只代表一个采样的色值。

2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英...