一线UI设计师对APP切图尺寸换算指导

工作后,很多同学还是会问到app切图尺寸的问题。今天分享android和iOS的换算分析,希望能帮到工作中的你。

1.在Android的显示模式为mdpi的时候,1dp等于1px。

2.在mdpi的情况下,屏幕分辨率是320*480px。

3.在ios的分辨率模式为@x1的时候,屏幕分辨率是320*480px。(注意这时候pt和px比例是1:1)

4.因为ios在@x1时候的像素关系和Android的mdpi时候的像素关系是一样的,@x2等于mdpi的2倍,也就是xhdpi的分辨率,所以推导关系如下:

对应@x1的标准分辨率时(iPhone2、3还有iPad1、2)

mdpi文字/图标/间距 = (@x1)*1 = px;

hdpi文字/图标/间距 = (@x1)*1.5 = px;

xhdpi文字/图标/间距 = (@x1)*2 = px;

xxdpi文字/图标/间距= (@x1)*2.25 = px;

对应@x2的高清分辨率时(iPhone4、4s、5、5s还有iPad Retina)

mdpi文字/图标/间距 = (@x2/2)*1 = px;

hdpi文字/图标/间距 = (@x2/2)*1.5 = px;

xhdpi文字/图标/间距 = (@x2/2)*2 = px;

xxdpi文字/图标/间距= (@x2/2)*2.25 = px;

对应@x3的高清分辨率时(iPhone6、6p)

mdpi文字/图标/间距 = (@x3/3)*1 = px;

hdpi文字/图标/间距 = (@x3/3)*1.5 = px;

xhdpi文字/图标/间距 = (@x3/3)*2 = px;

xxdpi文字/图标/间距= (@x3/3)*2.25 = px;

5.给开发的时候注意按着dpi模式把尺寸标注改成对应的dp。

原文发布于微信公众号 - 我分享我快乐(duan_uid)

原文发表时间:2016-03-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3273
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1183
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

2666
来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

3543
来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

921
来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

672
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

22510
来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

1112
来自专栏前端布道

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

772
来自专栏yang0range

CSS的盒子模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的...

1853

扫码关注云+社区

领取腾讯云代金券