当前位置:长春SEO > SEO教程 >
SEO教程

移动页面设计单位尺寸介绍转换表



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

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);

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

总结

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


移动页面设计单位尺寸介绍转换表 http://www.121seo.cn/jiaocheng/1189.html
以上文章出自长春SEO自学网未经作者许可,不得转载。2019-07-06

分享到:
上一篇:做长春网站优化需要注意的事项有哪些?
下一篇:没有了
相关推荐:


推荐文章
最新文章
热搜词汇
优化技巧 网站优化 长春网站优化 关键词排名 网站优化技巧 百度人工智能 织梦后台无法输入中文 稳定关键词排名 优化做好电商 优化方案 网站日志 流量如何增加 360搜索升级 网站优化重点 如何做好seo 搜索引擎命令 标题不能为空 五要五不要 织梦手机模板 网站如何收录 站长心得 学校 网站被黑 网站问题 织梦标签 首页优化 目标关键词 页面优化 转载文章的技巧 网站排名 关键词挖掘方法 织梦插件 织梦cms技巧 识别链接作弊 网站优化关注点 高权重外链 营销 快照处理 如何做伪原创 关键词布局 蜘蛛抓取 首页布局 关键词快速上排名 关键词快速排名 灰色行业优化排名