移动开发之设计稿转换页面单位尺寸

Posted threenerd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动开发之设计稿转换页面单位尺寸相关的知识,希望对你有一定的参考价值。

在写这篇文章之前,我询问了在唯品会和腾讯的童鞋、以及公司里面前端大神(深哥),对于设计稿切图的详细方法,经过对比验证,得出设计稿转换页面单位尺寸方法步骤。我分别询问下面四个问题:

1. 设计稿的单位是什么,一般大小是什么?

2. 页面长度单位用什么,px、em、rem,还是混合,如果用rem,html的font-size是多少?

3. 设计稿转换成页面长度的方法?

4. 如果做媒体查询,合适的区间是什么?

PS:他们都已设置viewport

Q&A

--朱姐(腾讯)回答

1. 设计稿的单位是px,一般是750px。

2. px、rem混合着用,rem的html font-size用16px。

3. 750px的设计图以375px量长宽,例如设计图里有元素宽度是100px,那么得到宽度会是 100px/2/16px = 3.125rem。

4. 根据设备宽度不同,设置不同的html 的font-size,这个区间并没说明。

--滨神(唯品会)回答

1. 设计稿的单位是px,一般是 750px。

2. 限制用rem,rem的html font-size用312.5%(由于默认字体大小是16px,所以最终是16px * 312.5% = 50px)。

3. 750px的设计图以375px量长宽,例如设计图里有元素宽度是100px,那么得到宽度会是 100px/2/50px = 1rem。

4. 如果设置固定html font-size,那么就需要弄媒体查询;如果按不同设备宽度算出各自的font-size,就不用弄媒体查询。

--深哥(公司大神)回答

1. 设计稿的单位是px,一般是1080px。

2. 建议是全部使用rem及百分比的方式,rem的html font-size用100px。

3. 1080px的设计图以540px量长宽,例如设计图里有元素宽度是100px,那么得到宽度会是 100px/2/100px = 0.5rem。

4. 按不同设备宽度算出各自的font-size,如果需要兼容特殊设备(例如iPad),才要做媒体查询。如果在iPad上的效果偏大,就要修改小一点字体,一般是76px,就可以跟手机差不多保持一致的效果了。

--得出结论

1. 设计稿的单位是px(PhotoShop出来当然是这个)。

2. 没人页面长度用em。

3. 元素长宽量取是设计图里的1/2。

这三个结论还并不能得出一个好的方案。

假设

为了简化问题,做一个假设,假如世界上只有一种手机型号(恰好是iPhone6),那设计稿转换的方式是怎么样的?

(1). 有张750px的设计稿,iPhone6的设备宽度375,取375为量取大小。

(2). 那么设计稿里面100px,在iPhone6显示为100px / (750 /375 ) = 50px。

(3). 规定一个html font-size值 X(例如50px),那rem值就是 (50/X) rem (例如 50px/ 50px = 1rem)

这里面可以很明显看到,font-size值并没有规定要用哪个值,它只是一个基数,元素的像素大小并不会因为这个基数有变化(所以上面问了三个人有三个不同的值,这没问题的)。也由于我们以375量取大小,所以在iPhone6上效果是与设计稿一致的。另外不是rem也是可以的(第三步不做),直接用px, 更加简单。

假设破灭

世界上当然有很多乱七八糟的机型,那如何在上面的基础上做适配?

(1). 假如用的是px单位,又不做媒体查询做适配。那么可能在某些机型上偏大偏小,但是还能用。之所以可以这么干,是因为手机的设备宽度一般是在320-470之间,与375产生的偏差效果并不会很大,当然偏差越大差异越大。

(2). 假如用的是px单位,媒体查询做适配。虽然这么做能适配机型,让效果看起来都差不多,但是做起来应该很痛苦,每个固定长度的元素都要写一遍,这会是很要命的吧。

(3). 假如用的是rem单位,不动态计算font-size值,不做媒体查询。我靠,那这不是跟第一种情况一样。

(4). 假如用的是rem单位,动态计算font-size值。计算方式如下:

var baseSize = 50, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ; //这个就是动态font-size值

这里我有一点没有说是, 这个计算公式是viewport设置initial-scale=1的情况,如果是其他缩放比例,那就需要乘以这个缩放比例。

例如:https://m.taobao.com/(淘宝移动版)

其viewport:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

其fontsize计算方式:

var baseSize = 75, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize * 0.5 ).toFixed(2) ; 

这里面关键的是那个375的基础量取值,当取375时,页面效果在设备宽度为375就必须显示正常,这个是很关键的约定。

(5). 假如用的是rem单位,媒体查询做适配。 在各个媒体查询的区间设置适当的font-size,没什么特别的。

最终方案

根据上面的情况,我觉得转换的方式可以用下面步骤。

(1). 设计稿应有约定的大小(例750px),选取一个手机的设备宽度做量取大小值(例375)。

(2). 限制使用rem,选取一个font-size值作为的基数。

(3). 计算每个元素的rem值,进行界面开发。

(4). js计算当前设备宽度的fontSize,并设置回html元素上。(适配步骤)

(5). 媒体查询作为补救措施,特殊设备宽度设置特殊的font-size。(这步不是必须的)

注意

(1). px可以用,但是当心效果会偏大或偏小,元素可能还会往下掉。

(2). 界面开发时只针对iPhone6(375pt)一种机型,页面完成后,才做适配步骤。

(3). 设计师可能会输出标注图(750px)和@3x切图(1125px)两种图。用@3x切图的设计稿切图,在超清屏幕才能清晰;标注图可用来计算元素长宽;但是设计师可能为了简单,就只输出一种视觉图,就如文章开头说的750px、1080px。

(4). 使用sass或less可以让代码写得直观、简单。

例如:

padding: rem(5) rem(15) 0 rem(15);

这样尺寸都是对应的设计稿的尺寸,开发人员就不用关心里面的实现细节了。

总结

设计稿转换页面单位尺寸,简单做就是——先针对某个机型做,再做适配。

src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510"> src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">

以上是关于移动开发之设计稿转换页面单位尺寸的主要内容,如果未能解决你的问题,请参考以下文章

移动web开发之rem的使用

H5在移动端尺寸适配方案

移动端之Web及app设计尺寸

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

Android - 开发页面需了解的dip,sp,px知识,以及它们之间的转换

px转vw和vh的工具(对前端同学有用)