移动开发之设计稿转换页面单位尺寸
2017-05-25 15:52
211 查看
在写这篇文章之前,我询问了在唯品会和腾讯的童鞋、以及公司里面前端大神(深哥),对于设计稿切图的详细方法,经过对比验证,得出设计稿转换页面单位尺寸方法步骤。我分别询问下面四个问题:
1. 设计稿的单位是什么,一般大小是什么?
2. 页面长度单位用什么,px、em、rem,还是混合,如果用rem,html的font-size是多少?
3. 设计稿转换成页面长度的方法?
4. 如果做媒体查询,合适的区间是什么?
PS:他们都已设置viewport
--朱姐(腾讯)回答
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值。计算方式如下:
这里我有一点没有说是, 这个计算公式是viewport设置initial-scale=1的情况,如果是其他缩放比例,那就需要乘以这个缩放比例。
例如:https://m.taobao.com/(淘宝移动版)
其viewport:
其fontsize计算方式:
这里面关键的是那个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可以让代码写得直观、简单。
例如:
这样尺寸都是对应的设计稿的尺寸,开发人员就不用关心里面的实现细节了。
总结
设计稿转换页面单位尺寸,简单做就是——先针对某个机型做,再做适配。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/5439756.html
1. 设计稿的单位是什么,一般大小是什么?
2. 页面长度单位用什么,px、em、rem,还是混合,如果用rem,html的font-size是多少?
3. 设计稿转换成页面长度的方法?
4. 如果做媒体查询,合适的区间是什么?
PS:他们都已设置viewport
--朱姐(腾讯)回答
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);
这样尺寸都是对应的设计稿的尺寸,开发人员就不用关心里面的实现细节了。
总结
设计稿转换页面单位尺寸,简单做就是——先针对某个机型做,再做适配。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/5439756.html
相关文章推荐
- 移动开发之设计稿转换页面单位尺寸
- 移动开发之设计稿转换页面单位尺寸
- 移动端页面使用单位的问题:关于px、百分比、em、rem开发中逐渐转换的问题记录
- 手机移动web页面的排版与布局一点经验(尺寸单位兼容行。)
- 移动web页面前端开发总结
- 游戏开发笔记(十)——移动功能设计
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 移动Web单页应用开发实践——页面结构化
- revit二次开发之单位转换
- 移动物体监控系统的设计与开发完整版
- 2010十大移动趋势(1/3):开发设计篇
- 移动开发中的字符集转换问题
- 家具设计的基本尺寸(单位:厘米)
- 移动设计中应用场景的转换
- 移动Web单页应用开发实践——页面结构化
- 从Web到移动应用的设计思维转换
- 开发移动应用的7大设计要点
- 【初探移动前端开发02】移动设备的页面
- 移动客户端设计开发经验-设计篇
- JQuery移动页面开发之屏幕方向改变与滚屏的实现