400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > ui设计 > 【UI设计基础知识】设计时移动端适配原理是什么

【UI设计基础知识】设计时移动端适配原理是什么

  • 发布: ui培训
  • 来源:UI干货资料
  • 2020-04-09 18:17:35
  • 阅读()
  • 分享
  • 手机端入口

一说到PPI,好像大家都会想到DPI。DPI是什么意思呢?DPI表示每英寸有多少个点。PPI表示每英寸有多少个像素。

那点是什么?点是印刷单位,就是每英寸(2.54厘米)上面有多少个油墨点。

当然,在Android系统中,DPI就是像素/每英寸,跟PPI是一个概念。Android系统真的是为所欲为呀。但是没办法,Android就是这么用了,咱们只能这么去理解了。

那为什么会有@1X、@2X、@3X的概念呢?主要是因为Android机型太多了,一个图片,要想放在所有的Android手机上,那得切多少张大小不一的图片呀,要累死切图的设计,上传图片的程序员的头发掉的也更快了吧。哈哈哈哈哈哈哈,所以,Android出了一套规则,好方便他们统一图片。

Android提出一个新的概念,DP。DP是Android为了使得开发者设置的长度能够根据不同屏幕DPI/PPI使用不同的像素(px)的图像以保证不同机型图像在视觉上统一的单位,你可以理解为DP为物理点,PX是像素点,一个物理点上可能有几个像素点。

【UI设计基础知识】移动端适配原理(下)

有一个公式:dp=(dpi/(160像素/英寸))px

Android提出的这个概念DP在iOS上同样适用。

那如果DPI的数值是160,那1DP=1PX;如果DPI的数值是320,那1DP=2PX;如果DPI的数值是480,那1DP=3PX;

好,大家理解一下下面的信息:假如一个物理点上有1个像素,那一个30X30PX的图像正常上传到屏幕上。假如一个物理点上有2个像素,那一个30X30PX的图像,为了保证图片看起来同样大小,是不是要上传一张60X60PX的图像才能看起来跟上一个图同样大小。同理假如一个物理点上有3个像素,那一个30X30PX的图像,为了保证图片看起来同样大小,是不是要上传一张90X90PX的图像才能看起来跟上一个图同样大小。

那这样在30是30的1倍,60是30的2倍,90是30的3倍,所以规范上讲@1X 表示一倍,@2X表示2倍 ,@3X表示3倍。

OK,大家明白了@1X、@2X、@3X 的事情,320PPI的图像肯定是@2X图了,但是iPhone11是326PPI,那是几倍?

既然引进DP这个概念是为了适配,所以在适配的时候,如果PPI/DPI的数值接近于那个就用哪个倍数。326PPI接近320,所以iPhone11是用的@2X图。

再深一些的知识,PX表示像素,一个点上像素越多,肯定就清晰。那iPhone手机,用@1X图的机型有iPhone3Gs;用@2X图的机型有:iPhone4/4S/4/5S/6/6S/7/8等;用的@3X图的机型有:iPhone6/6S/7/8Plus、iPhoneX等。大家手上有别的机型也可以算算自己的手机的图片是多少倍的。

课程好礼申请领取
您的姓名
您的电话
意向课程
 

中公优就业

官方微信

扫描上方二维码或者手动搜索ujiuye,关注【优就业】,每日推送行业资讯、干货资料、热门话题、招聘信息和求职攻略,还有不定期的优惠活动一手发布!

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

相关推荐

优就业:ujiuye

关注中公优就业官方微信

  • 精品好课
  • 活动秒杀
  • 资料领取
QQ交流群
领取免费网课
(加群备注“网站”)
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
嵌入式物联网 加入群聊 +
优就业官方微信
扫码关注
领取免费学习资料

趁年轻 学门技术充个电
0元
入学
30天免费试学, 3000
直减优惠
立即
抢占
2周
特训
价值299的特训营课程,
9.9元抢购
立即
抢购
80G
资源包
IT行业11类热门岗位全套资源包
立即
领取
课程资料、活动优惠 领取通道