iOS 屏幕尺寸、逻辑分辨率、物理分辨率之间的相互关系
手机屏幕长宽尺寸换算公式
手机屏幕长宽尺寸换算公式
手机屏幕的长宽尺寸换算公式主要涉及到屏幕的对角线长度、长宽比和像素密度等概念。
下面分别进行介绍。
1.屏幕对角线长度：
手机屏幕对角线长度是指从屏幕的一角到对角的距离。
这个长度通常使用英寸（inch）作为单位。
对于一般的长方形屏幕，可以使用勾股定理来计算对角线长度。
假设手机屏幕的长和宽分别为L和W，对角线长度为D，则有以下公式：
D=√(L^2+W^2)
2.长宽比：
长宽比是指屏幕的宽度与高度之比。
它用于描述屏幕的形状，如16:9、18:9等。
长宽比通常以两个整数表示，分别表示屏幕的宽度和高度之比。
可以使用最大公约数化简长宽比，如16:9可以化简为
16/9=1.78、如果知道屏幕的对角线长度D和长宽比，可以使用以下公式计算屏幕的实际宽度和高度：
W=D/√(1+(1/长宽比^2))
H=W/长宽比
3.像素密度：
像素密度是指屏幕上每英寸的像素数量。
像素密度通常以每英寸的像素数（如ppi）表示。
如果知道屏幕的分辨率和对角线长度，可以使用以下公式计算像素密度：
像素密度=√(水平像素数^2+垂直像素数^2)/对角线长度
需要注意的是，以上的公式只适用于长方形屏幕的计算。
对于其他形状的屏幕，如圆形、椭圆形等，计算公式可能会有所不同。
物理分辨率和计算分辨率的概念
物理分辨率和计算分辨率的概念物理分辨率是指显示设备（如电视、电脑显示器、手机屏幕）实际可以显示的像素点数量，通常以水平像素数×垂直像素数来表示（例如，1920×1080）。
物理分辨率决定了设备屏幕上显示图像的细节和清晰度。
计算分辨率是指根据显示设备的物理分辨率和一些特定的算法，通过估算或插值的方法来确定设备显示的图像细节。
计算分辨率可以用于调整图像大小、改善图像质量或增加图像细节。
计算分辨率常用于数字图片处理和计算机图形学中。
它可以通过算法来增加图像的分辨率，从而使图像更加清晰。
计算分辨率会通过相关的插值算法来填充图像的空白像素，从而增加图像的细节和清晰度。
然而，计算分辨率并不能真正改变设备的物理分辨率，只能通过算法来模拟增加图像的分辨率。
移动端APPUI设计与交互基础教程 第2章 UI图标设计
2.1 初识移动设备尺寸及其相关概念
2.1.2 iPhone机型屏幕尺寸规格
2.2 UI图标设计
2.2.1 图标的分类 1．系统图标（按属性分类） 系统图标指的是系统功能或APP应用程序的启动图标。 2．功能图标（按属性分类） 功能图标指的是承担着某种功能的图标。
2.6.1 知识点概述 1．拟物 拟物指的是通过叠加高光、纹理、材质、阴影等效果对实物进行再现，其 设计元素均来自于真实生活接触的物件。 2．拟物与扁平 拟物与扁平是相互对立的设计理念，作为设计师应该多关注信息本身的含 义，而对于元素承载信息量的多少则要根据产品的用户角色来综合考量。
图2-60 质感细节明显的拟物图标
2.6 拟物类图标的制作
2.6.2 拟物化图标制作（木纹质感翻页日历）
图2-61 拟物化图标效果分析
2.6 拟物类图标的制作
2.6.3 课堂巩固练习（拟物齿轮）
图2-83 齿轮拟物图标
图2-84 快速绘制齿轮
谢谢观看！
设计与交互基础教程
MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE
移 动 端
APP UI
02
UI图标设计
本章依托UI设计中常见图标的制作方法与质感表现，在介绍图标制作 规范的基础上，巩固和加强Photoshop软件在UI设计中的核心操作。
2.1 初识移动设备尺寸及其相关概念
图2-4 扁平化图标设计
2.2 UI图标设计
2.2.1 图标的分类 5．拟物化图标（按设计风格分类） 拟物化图标指的是模拟现实物品的造型和质感的图标。
显示器屏幕尺寸和分辨率之间是什么关系？
显⽰器屏幕尺⼨和分辨率之间是什么关系？我们列出来它们之间的⽐例关系70:25=300:X，通过计算得出x≈107。
所以，27英⼨视⽹膜屏幕级别需要PPI达到107。
（精确计算与⽐例计算结果误差较⼩，这⾥使⽤⽐例⽅法进⾏简单计算。
）03 PPI是否越⾼越好？的确，PPI越精细越好。
但咱平民⼩⽼百姓，凡事都讲究实⽤性。
举个例⼦来说，太阳系体积排名第三的天王星和体积排名倒数第⼆的⽕星。
在夜晚眺望星空时，很难看出⼆者区别。
因为⼈的⾁眼分辨有限。
⼆者体积相差数倍之多同理，300PPI和100PPI的显⽰器在使⽤时都察觉不到像素点的存在，但300PPI的显⽰器价格要贵上数倍之多，那咱为啥买300PPI的，有多余的钱整两顿烧烤不⾹吗？钱有点多，攒⼀台顶配主机吧！！（300PPI的显⽰器需要满⾜29英⼨8K分辨率的要求，⽽⼀款PPI不⾜300的31.5英⼨8K分辨率显⽰器，市场售价在2.6万，这样的价格能接受吗？）同时，相同显⽰⾯积下的PPI越⾼，对机器性能的要求就越⼤。
游戏在4K分辨率下要⽐2K分辨率下的帧数低很多。
⼀般玩家会选择降低分辨率以获得流畅的游戏体验。
（⼟豪玩家不在讨论范围，双路泰坦即使8K分辨率也能流畅游戏）双路泰坦：降什么分辨率？！最重要的是，Windows电脑分辨率越⾼，显⽰内容就越多。
原来1920*1080像素的图像，在1080p分辨率打开这张图像，这张图像铺满整个屏幕。
在4K分辨率的显⽰器中打开这张图⽚时，只占据了约屏幕四分之⼀的位置。
在使⽤⼩尺⼨显⽰器时选择过⾼分辨率，会让原本正常显⽰的内容有很⼤的缩放⽐。
容易出现看不清显⽰器内容的情况，这时我们还需要调整系统的缩放⽐例才能正常使⽤。
调整缩放⽐例放⼤⽂字所以，我们在选择显⽰器的时候，并不是PPI越⾼越好。
有的时候，较⾼的PPI反⽽会带来不好的使⽤体验。
我们只需购买PPI 刚好达到视⽹膜屏幕级别的显⽰器即可，但显⽰器达到视⽹膜屏幕级别需要多少PPI呢？04 视⽹膜级别显⽰器要多少PPI？要知道，不同尺⼨的显⽰器，因为观看距离也不⼀样，所以它们的PPI也不同。
分辨率和尺寸对应关系
分辨率和尺寸对应关系随着数字设备的普及和数字媒体的不断发展，我们越来越需要了解分辨率和尺寸对应关系。
下面，我们来详细探讨一下这两个概念的关系。
一、分辨率的定义分辨率指的是显示器或照片中像素点的数量，通常用“像素”（Pixel）表示。
例如，一张照片的分辨率为1920×1080，表示该照片包含了2073600 个像素。
二、尺寸的定义尺寸指的是显示器或照片的物理大小，通常用“英寸”（Inch）表示。
例如，一块显示器的尺寸为 23 英寸，表示该显示器的对角线长度为23 英寸。
三、分辨率和尺寸的关系分辨率和尺寸常常被误解为相互独立的两个概念，实际上它们是紧密相关的。
显示器或照片的分辨率和尺寸之间存在以下关系：1. 与分辨率相同的尺寸下，像素的大小会改变。
当显示器或照片尺寸相同，但分辨率不同时，像素的大小也会不同。
分辨率越高，每个像素越小，显示效果越好。
如同等尺寸的高分屏，显示效果更加清晰细腻。
2. 与尺寸相同的分辨率下，像素的数量会改变。
当显示器或照片分辨率相同，但尺寸不同时，像素的数量也会不同。
尺寸越大，则像素数量越多，显示效果越清晰。
如同等分辨率屏幕，更大的屏幕尺寸可以呈现更多的细节。
四、分辨率和尺寸的影响因素分辨率和尺寸对显示效果的影响因素也不相同。
分辨率主要影响图像的清晰度，而尺寸主要影响图像的细节。
分辨率的影响：1. 掌握更多的细节。
分辨率越高，像素越多，能够呈现的图像细节越多，显示效果越清晰细腻。
2. 观看自然感。
高分辨率图像的色彩更加真实自然，色调、纹理更加明显，看的更舒适。
3. 花费更多费用。
高分辨率的显示器和照片的成本较高，一般适用于专业和高端用户。
尺寸的影响：1. 显示更大的场景。
大尺寸的显示器和照片能够呈现更广阔的场景，观感十分震撼。
2. 花费更高费用。
随着尺寸的增大，成本也会相应地提高，对消费者经济实力的要求也会更高。
3. 看更久时间观看不会疲劳。
大尺寸的屏幕能够更好地保护我们的视力，长时间观看也不会疲劳感。
iPhone手机尺寸、分辨率、高宽比例、几倍图总结
iPhone⼿机尺⼨、分辨率、⾼宽⽐例、⼏倍图总结iPhone2G屏幕为3.5⼨，分辨率为480*320像素，⽐例为3:2。
1倍图。
iPhone3G屏幕为3.5⼨，分辨率为480*320像素，⽐例为3:2。
1倍图。
iPhone3GS屏幕为3.5⼨，分辨率为480*320像素，⽐例为3:2。
1倍图。
iPhone4屏幕为3.5⼨，分辨率为960*640像素，⽐例为3:2，⽐之前三代像素增加，但屏幕⽐例没变化。
2倍图。
iPhone4s屏幕为3.5⼨，分辨率为960*640像素，⽐例为3:2。
2倍图。
iPhone5屏幕为4⼨视⽹膜屏，分辨率为1136*640像素，⽐例为16:9。
2倍图。
iPhone5s屏幕为4⼨视⽹膜屏，分辨率为1136*640像素，⽐例为16:9。
2倍图。
iPhone6屏幕为4.7⼨，分辨率为1334*750像素，⽐例为16:9。
2倍图。
iPhone6Plus屏幕为5.5⼨，分辨率为1920*1080像素，⽐例为16:9。
3倍图。
iPhone6s屏幕为4.7⼨，分辨率为1334*750像素，⽐例为16:9。
2倍图。
iPhone6sPlus屏幕为5.5⼨，分辨率为1920*1080像素，⽐例为16:9。
3倍图。
iPhone7屏幕为4.7⼨，分辨率为1334*750像素，⽐例为16:9。
2倍图。
iPhone7Plus屏幕为5.5⼨，分辨率为1920*1080像素，⽐例为16:9。
3倍图。
iPhone8屏幕为4.7⼨，分辨率为1334*750像素，⽐例为16:9。
2倍图。
iPhone8Plus屏幕为5.5⼨，分辨率为1920*1080像素，⽐例为16:9。
3倍图。
iPhone X屏幕为5.8⼨，分辨率为2436*1125像素，⽐例为19.5:9。
3倍图。
iPhone XR屏幕为5.8⼨，分辨率为1792*828像素，⽐例为19.5:9。
2倍图。
iPhoneXS屏幕为5.8⼨，分辨率为2436*1125像素，⽐例为19.5:9。
iPhone6界面设计尺寸规范大全【含原型设计规范】
iPhone6界面设计尺寸规范大全【含原型设计规范】目前，很多APP设计师的APP Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。
这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。
当然下面的10个方面的不仅是iPhone6界面视觉设计尺寸规范，也是iPhone6界面原型设计尺寸规范。
值得APP设计师和APP产品经理好好的阅读。
所以，ios系统平台上的APP交互设计稿的尺寸，就按照iPhone6的尺寸来做。
尺寸大小如下：750*1334px1、 iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为750x1334px。
☆ 状态栏(status bar)：就是电量条，其高度为：40px；☆ 导航栏(navigation)：就是顶部条，其高度为：88px；☆主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px截图如下：点击查看：完整版的iPhone 6界面设计尺寸规范另外25学堂跟大家推荐3款测量标注工具为：MarkMan马克鳗，Dorado标注，PXcook像素大厨。
1、Android APP界面标注、尺寸换算和APP标注工具2、移动APP设计之PS切图插件大汇总，值得收藏2、关于iPhone6的图标的尺寸：导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px 左右，最大为96x64px。
关于iPhone6的文字的尺寸：导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px。
内容区域的文字大小是：20px 24px，26px，28px，30px，32px，34px。
扩展阅读：iphone6/6+的适配原理和适配心得分享APP设计必备素材：iPhone6手机模板素材下载3、（iPhone6设计稿尺寸是@2x），做原型图的时候，可以做成@2x的，即750x1334px；也可以做成@1x的，即375*667px。
(笔记47)UI——dp、dip、px、dpi、density概念及关系
(笔记47)UI——dp、dip、px、dpi、density概念及关系(2013-01-23 14:11:00)转载▼分类：android标签：杂谈Array -----------------------概念关系-------------------------------size：屏幕物理尺寸，单位英寸，如19寸显示器dpi：分辨率,指每英寸长度上的点数.DPI又可细分为水平分辨率和垂直分辨率,例如一张1英寸*1英寸的图片,如果它的水平分辨率是100 dpi,垂直分辨率是50 dpi,那么就是说,它水平每英寸分成100小段,垂直每英寸分成50小段,就像米尺上的一格格那样.这张图总共有100*50=5000个格子,这张图片共有5000像素.由于它的水平分辨率和垂直分辨率不相等,所以每个像素是一个微小的长方形。
所以像素实际上是一个面积的概念,而因为一般电脑/数码相机等生产出来的图片都是水平分辨率和垂直分辨率相等,每个像素是个微小的正方形,所以就讲成"DPI表示每英寸长度上的像素个数",其实就是"每英寸长度上的点数"了.数码相机的"多少多少万像素"的概念就是这样来的,比如说,一个相机最大可以拍出1600像素*1200像素的相片,它的像素值就是1600*1200=192万,约等于200万,这就是一台200万像素的数码相机了. 于是问题中所讲的300 dpi就表示屏幕上水平和垂直的方向上每英寸的长度上都有300个点.这台机屏幕的实际高度要用像素数目和dpi结合起来算才能得出.对于这台机子,400像素就是400/300=1.33英寸,533像素就是533/300=1.78英寸. 我们在页面布局的时候，经常会设置容器的长度，但是到底该使用哪个作为长度的单位而懊恼。
在Android中支持的描述大小区域的类型有以下几种。
px(pixels)——像素：不同的设备显示效果相同，一般我们HVGA代表320x480像素，这个用的比较多。
怎样区分图片的实际像素、分辨率和尺寸大小
怎样区分图⽚的实际像素、分辨率和尺⼨⼤⼩1. 为什么设计师给的设计图到前端开发师⼿⾥要除以⼆？A:像素分为物理像素和逻辑像素，设计师提供的是物理像素，⽽我们使⽤的是逻辑像素。
物理像素并不代表css中使⽤的像素。
如iphone5s的逻辑分辨率是320×568，⽽物理分辨率是640×1136，像素倍率是2倍。
1.实际像素：在数码产品上图像时由点构成的，也就是说同⼀块⼤的尺⼨，上⾯的点越多，他的实际像素就越⼤。
⽐如⼀张屏幕分辨率为1024*768的照⽚，⼤概就是约80万像素，也就是说横向由1024个点构成，纵向由768个点构成。
也就是说有多少个点构成，多少像素就有多少个点。
2. 3实际分辨率：现实中主要的有两种分辨率，⼀种是屏幕分辨率，另⼀种是打印分辨率。
打印分辨率⽐较好记，⼀般的照⽚打印分辨率都是72dpi.也就是⼀英⼨的长度中打印72个像素。
⽽屏幕分辨率是指⼀张图⽚点的排列⽅式。
⽐如上⾯的1024*768的排列⼀样。
⽐如80万的像素也可以800*1000的屏幕分辨率，只是这些不常⽤⽽已。
⾄于其他的扫描分辨率和显⽰分辨率等等就不重要哦了。
3. 4实际尺⼨：这个⽐较直观了，所有物件都有⾃⼰的尺⼨的，图⽚也有。
这⾥指的是实际尺⼨，也就是说打印出来的图⽚的尺⼨，当然你也可以在打印的时候选择放⼤打印或者缩⼩打印。
4. 5关于图像的两种尺⼨的换算关系：1.⼀种是像素尺⼨，也称显⽰⼤⼩或者显⽰尺⼨，等同于图像的像素值。
2.⼀种是打印尺⼨，也称打印⼤⼩，需要同时参考像素尺⼨和打印分辨率才能确定。
3.在分辨率和打印尺⼨的长度单位⼀致的前提下，像素尺⼨除以分辨率就等于打印尺⼨。
屏幕计算公式范文
屏幕计算公式范文
屏幕计算公式是用于计算屏幕尺寸和分辨率之间关系的公式。
在现代
技术中，屏幕尺寸一般以英寸（inch）为单位，分辨率则以像素（pixel）为单位。
屏幕尺寸指的是屏幕对角线的长度，而分辨率表示屏幕水平和垂
直方向上的像素数。
1.屏幕尺寸与分辨率之间的关系：
屏幕尺寸（inch）= √(水平分辨率² + 垂直分辨率²) / PPI
其中，PPI（Pixels Per Inch）表示每英寸的像素数，可以根据屏幕
分辨率和尺寸计算得到。
2.水平或垂直像素数：
像素数 = 屏幕尺寸（inch）× PPI
可以根据屏幕尺寸和PPI计算出水平或垂直方向上的像素数。
3.屏幕面积：
屏幕面积（平方英寸）=水平分辨率（像素）×垂直分辨率（像素）
/PPI²
屏幕面积可以根据水平和垂直分辨率以及PPI计算得到。
4.PPI计算：
PPI = √(水平分辨率² + 垂直分辨率²) / 屏幕尺寸（inch）
PPI可以根据屏幕分辨率和尺寸计算得到，它表示每英寸的像素数。
需要注意的是，上述公式中的PPI是根据实际测量或制造商提供的数值来确定的，而不是通过计算得到的。
此外，公式中的尺寸单位应保持一致，通常为英寸。
通过上述屏幕计算公式，人们可以根据已知的尺寸或分辨率，计算出相关的数值，从而更好地了解和比较不同屏幕的性能和特点。
历代iphone分辨率、IOS UI设计尺寸规范
历代iphone分辨率、IOS UI设计尺寸规范iPhone、ipd常见设计尺寸iPhone：iPhone 1G 320x480iPhone 3G 320x480iPhone 3GS 320x480iPhone 4 640x960iPhone 4S 640x960iPhone 5 640x1136iPhone 5S 640x1136iPhone 5C 640x1136iPhone 6 750x1334iPhone 6 Plus 1080x1920 （开发应按照1242x2208适配）iPhone 6S 750x1334iPhone 6S Plus 1080x1920 （开发应按照1242x2208适配）iPhone SE 640x1136iPhone6-iPhone8这段时间苹果新XX的物理像素都是750x1334px。
所有PlusXX的物理像素都是1242x2208px iPhone 7 750x1334iPhone 7 Plus 1080x1920 （开发应按照1242x2208适配）iPhone XS Mx：1242 x 2688 pxiPhone XS：1125 x 2436 pxiPhone XR：828 x 1792 px但是如果我们用点的单位看就会得到：iPhone XS Mx：414 x 896 pt （iPhone Plus分辨率宽度）iPhone XS：375x812 pt （iPhone 6/7/8分辨率宽度）iPhone XR：414 x 896 pt （iPhone Plus分辨率宽度）iPod Touch: iPod Touch 1G320x480iPod Touch 2G320x480iPod Touch 3G320x480iPod Touch 4G640x960iPod Touch 5G640x1136iPd:iPd 11024x768iPd 21024x768The New iPd2048x1536iPd mini1024x768iPd 42048x1536iPd ir2048x1536iPd mini 22048x1536iPd ir 2 2048x1536iPd mini 3 2048x1536iPd mini 4 2048x1536iPd Pro 2732x2048IOS图标尺寸输出列表：●1024x1024●180x180●120x120●87x87●80x80●58x58启动图片尺寸输出列表：●640x960●640x1136●750x1334●1242x2208安卓桌面图标：72 96 1441. 分辨率（px）有用设计指南！iOS8 最新设计参考指南2. UI元素高度（px）有用设计指南！iOS8 最新设计参考指南3. 文字（px）有用设计指南！iOS8 最新设计参考指南4. 图标（px）有用设计指南！iOS8 最新设计参考指南文字尺寸：。
像素点,分辨率,色彩深度和物理尺寸的含义
一、像素点的含义像素点是数字图像中的最小单元，它是由红、绿、蓝三种颜色的光栅排列组成的。
每个像素点都有自己的颜色和亮度值，当大量的像素点组合在一起时，就可以形成一幅完整的图像。
像素点的密度越高，图像的清晰度也就越高。
二、分辨率的含义分辨率是指数字图像中可显示或打印的像素数量，通常以水平像素数和垂直像素数表示。
一个分辨率为1920x1080的高清显示器就包含了1920个水平像素和1080个垂直像素。
分辨率越高，图像显示的细节就越丰富，清晰度也就越高。
三、色彩深度的含义色彩深度是指每个像素点可以表达的颜色数量。
通常用位数来表示，比如8位色彩深度就可以表达256种颜色，而24位色彩深度则可以表达约1677万种颜色。
色彩深度越高，图像显示的颜色层次和渐变就越丰富。
四、物理尺寸的含义图像的物理尺寸是指图像在实际显示或打印时所占的空间大小。
物理尺寸通常以英寸或厘米为单位，它和像素数量及分辨率密切相关。
当像素数量相同的情况下，分辨率越高，图像的物理尺寸就越小。
而当分辨率相同的情况下，像素数量越多，图像的物理尺寸就越大。
五、像素点、分辨率、色彩深度和物理尺寸的关系1. 像素点、分辨率、色彩深度和物理尺寸是数字图像的四个基本属性，它们共同决定了图像的质量和显示效果。
2. 像素点决定了图像的清晰度，它的密度越高，图像的细节就显示得越清晰；分辨率决定了图像的表现能力，它越高，图像的细节就显示得越丰富；色彩深度决定了图像的色彩层次和渐变，它越高，图像的颜色表现就越丰富；物理尺寸决定了图像在显示或打印时所占的空间大小，它和像素数量及分辨率密切相关。
3. 在实际应用中，像素点、分辨率、色彩深度和物理尺寸需要相互配合，才能达到最佳的显示效果。
高分辨率的显示器需要有足够的色彩深度和像素密度，才能显示出真实丰富的图像细节。
六、总结像素点、分辨率、色彩深度和物理尺寸是数字图像的四个基本属性，它们共同决定了图像的质量和显示效果。
在实际应用中，它们需要相互配合，才能达到最佳的显示效果。
什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是PPI,DPI,DPR和DIP
什么是物理像素、虚拟像素、逻辑像素、设备像素，什么⼜是PPI,DPI,DPR和DIP什么是物理像素、虚拟像素、逻辑像素、设备像素，什么⼜是 PPI, DPI, DPR 和 DIP？有关 viewport 以及苹果安卓设备上的页⾯呈现为什么效果不⼀样，⼜有哪些⽅法去改变和统⼀呢？⽹络上有很多资源对这些知识点进⾏了介绍，但是查看之后我发现⼤都⽐较零散且阅读顺序容易让新⼈疑惑，在这⾥我尝试根据⼏篇⽂章糅合了⼀个循序渐进的知识点整理。
在正式开始介绍之前，我们先集中看看⼏个基本概念。
设备像素(device pixel, dp): ⼜称为物理像素。
指设备能控制显⽰的最⼩物理单位，意指显⽰器上⼀个个的点。
从屏幕在⼯⼚⽣产出的那天起，它上⾯设备像素点就固定不变了，单位 pt。
pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(inch), inch及英⼨，⽽1英⼨等于2.54厘⽶。
所以设备像素的特点就是⼤⼩固定，不可变。
⽐如 iPhone 5 的分辨率为 640 x 1136px.CSS像素(css pixel, px): ⼜称为虚拟像素，也可以理解为直觉像素。
CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使⽤的逻辑像素。
在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。
px 是⼀个相对单位，相对的是前⾯所说的设备像素(device pixel)。
⽐如 iPhone 5 的 CSS 像素数为 320 x 568px.像素概念汇总前⾯说到的 px 相对单位指的是图像显⽰的基本单元，它既不是⼀个确定的物理量，也不是⼀个点或者⼩⽅块，⽽是⼀个抽象概念。
刚刚提到了图像显⽰的基本单元，这个东西在不同设备上⼜是不⼀样的，例如显⽰器上的物理像素指的是显⽰器的点距，⽽打印机的物理像素则指的是打印机的墨点。
作为⼀个抽象概念，CSS 像素⼜具有两个⽅⾯的相对性，即：在同⼀个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（即CSS像素的第⼀⽅⾯的相对性）；在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的（即CSS像素的第⼆⽅⾯的相对性）；所以，CSS中的1px（CSS像素可变）!== 设备的1px（设备像素不可变）。
手机屏幕计算公式
手机屏幕计算公式
要计算手机屏幕的大小，可以使用下面这个公式：
屏幕尺寸=√(屏幕宽度²+屏幕高度²)/分辨率
其中，屏幕宽度和屏幕高度是指屏幕的实际尺寸，单位可以是毫米、厘米或英寸等。
分辨率是指屏幕上的像素数量，通常使用横向像素和纵向像素的乘积来表示。
例如，假设手机屏幕的宽度是10厘米，高度是15厘米，分辨率是1920x1080。
那么根据上述公式，屏幕尺寸可以计算为：
屏幕尺寸=√(10²+15²)/1920
=√(100+225)/1920
=√325/1920
需要注意的是，手机屏幕的实际尺寸和分辨率是两个不同的概念。
实际尺寸是指屏幕的物理大小，而分辨率是指屏幕上能够显示的像素数量。
通常情况下，屏幕的分辨率越高，屏幕的效果就越清晰。
而屏幕的物理大小主要影响到屏幕的可视面积和手感体验。
此外，还需要注意的是，由于手机屏幕的横纵比例不同，所以使用上述公式计算出的屏幕尺寸可能与实际屏幕尺寸有所差异。
所以，在实际应用中，我们可能需要根据具体的需求和实际情况对公式进行修改和调整。
移动前端适配—逻辑像素和物理像素
移动前端适配—逻辑像素和物理像素基础概念dpi每英⼨所含有的像素点的个数。
物理像素移动设备出⼚时，就具备的分辨率，⼩⽶5 1920x1080 iphone6 1334x750逻辑像素Give your page a <meta name="viewport" content="width=device-width">, read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.当你在html设置了<meta name="viewport" content="width=device-width">，那么页⾯就会以移动设备的dpis width作为逻辑像素。
dpis width & scaledpis width 如何得出？你先需要计算dpi⼩⽶5为例， sqrt(19202 x 10802) / 5.15(屏幕的物理尺⼨) = 427.7计算scalescale = 427.7 / 160 约等于 3.(这个计算是针对于android⼿机，不过ios也类似，⾄少⽬前的机型都符合这个计算，有清楚的⼤佬可以告知)android 以160的倍数作为分隔点，来划分不同⼿机逻辑像素的缩放⽐例。
160 mdpi320 hdpi480 xhdpi计算dpis width 也就是逻辑像素dpis width = 1080 / 3 = 360那么结论来了开发时其实只需要考虑逻辑像素，android 中 dp单位和移动前端中的px是⼀样的，ios中⽤的也是逻辑像素。
那么开发时，图⽚我们改如何选择呢？1280 x 720 、1920 x 1080 、2560 x 1440,这物理分辨率不同的⼿机之间有什么区别？还是以⼩⽶5为例，逻辑像素是360，那么其实对于⼩⽶5来说360px(物理像素)的图⽚就可以正常显⽰，并且不会拉伸，那么为了让图⽚的⾊彩更加好，可以使⽤720px(物理像素)的图⽚或者是1080px(物理像素)的图⽚。
物理像素与逻辑像素
物理像素与逻辑像素1、物理像素设备像素，在同⼀个设备上，它的物理像素是固定的，这是⼚商在出⼚时就设置好了的，即⼀个设备的分辨率是固定的。
2、逻辑像素CSS像素，viewport中的⼀个⼩⽅格，CSS样式代码中使⽤的是逻辑像素。
如果在⼀个设备中，物理像素与逻辑像素相等，将不会产⽣任何问题。
但是，在iphone 4中，物理像素是640px*960px，⽽逻辑像素数为320*480px。
因此，需要使⽤⼤约4个物理像素来显⽰⼀个CSS像素。
3、像素⽐物理像素与逻辑像素之间的⽐例。
当像素⽐为1:1时，使⽤1个物理像素显⽰1个逻辑像素；当像素⽐为2:1时，使⽤4个物理像素显⽰1个逻辑像素。
4、CSS中的1px并不等于设备的1px在CSS中⼀般使⽤px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成⼀个错觉，那就是CSS中的像素就是设备的物理像素。
但实际情况却并⾮如此，CSS中的像素只是⼀个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。
在早先的移动设备中，屏幕像素密度都⽐较低，如iphone3，它的分辨率为320*480，在iphone3上，1个CSS像素确实是等于1个物理像素的。
后来随着技术的发展，移动设备的像素越来越⾼，从iphone4开始，推出了所谓的Retina屏，分辨率提⾼了⼀倍，变成640*960，但屏幕尺⼨却没变化，这就意味着同样⼤⼩的屏幕上，像素却多了⼀倍，这时，1个CSS像素是等于4个物理像素的。
5、实现真正的1物理像素当viewport的属性initial-scale为1时，页⾯⼤⼩正常，但initial-scale为0.5时，页⾯被缩⼩了1倍，像素⽐为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩⼩后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
eg：border-width:1px并不是最⼩边框，浏览器可以显⽰的最⼩粒度⽐1px还要⼩。
关于dpr的理解
关于dpr的理解
做⼿机端项⽬，不可避免要寻找⼀个⼿机端页⾯与⼿机屏幕适配最佳⽅案。
在这之前，我觉得还是要去理解⼀下dpr（设备像素⽐）。
我们还要了解⼀些与dpr相关的概念：
(1)物理像素(physical pixel)
⼀个物理像素是显⽰器(⼿机屏幕)上最⼩的物理显⽰单元（像素颗粒），在操作系统的调度下，每⼀个设备像素都有⾃⼰的颜⾊值和亮度值。
如：iPhone6上就有750*1334个物理像素颗粒。
(2)设备独⽴像素(density-independent pixel)
设备独⽴像素(也叫密度⽆关像素)，可以认为是计算机坐标系统中得⼀个点，这个点代表⼀个可以由程序使⽤的虚拟像素(⽐如: css像素)，有时我们也说成是逻辑像素。
(3)设备像素⽐(device pixel ratio )简称dpr
设备像素⽐(简称dpr)定义了物理像素和设备独⽴像素的对应关系。
(4)公式：
设备像素⽐ = 物理像素 / 逻辑像素(px) Ps:在某⼀⽅向上，x⽅向或者y⽅向
如：iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375。
也就是说，1个逻辑像素，在x轴和y轴⽅向，需要2个物理像素来显⽰，如下图：
问题：为什么以iPhone6为标准的设计稿的尺⼨是以750px宽度来设计的呢？
iPhone6的满屏宽度是375px（Viewport’s device-width (in CSS pixels)：375px），⽽iPhone6采⽤的视⽹膜屏的物理像素是满屏宽度的2倍，并且设计师所⽤的PS设计软件分辨率和像素关系是1:1。
所以为了做出的清晰的页⾯，设计。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
iOS 屏幕尺寸、逻辑分辨率、物理分辨率之间的相互关系
规格对照表
相关术语说明:
●inch（英寸）
1 inch = 2.54cm = 25.4mm
●PPI （像素密度）
表示沿着对角线，每英寸所拥有的像素（pixel）数目，PPI的数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高，颗粒感越弱，图像更清晰。
根据勾股定理:iPhone4/iPhone4s的PPI的计算值:
= 163 pixcel/inch
●scale factor （缩放因子）
早期的iPhone3GS的屏幕屏幕分辨率是320 * 480,iOS绘制图形（CGPoint/CGSize/CGRect）均已point为单位。
1 point = 1 pixel
后来在iPhone4中，同样大小（3.5inch）的屏幕采用Retina(视网膜)屏幕显示技术，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到（320 * 2） * （480 * 2） = 640 * 960,显像分辨率提高到iPhone3GS的4倍。
iPhone6Plus中横、纵向方向像素密度都被放大到3倍，显像分辨率提高到iPhone3GS的9倍。
scale = 单位长度内的数量比(pixel/point)
●屏幕尺寸
指的是显示屏的对角长度，以下为iPhone5s、iPhone6s、iPhone6Plus屏幕尺寸规格示意图：
点（point）和像素（pixel）换算关系
iPhone3GS
1point = 1pixel
iPone4/4s、iPhone5/iPhone5s、iPhone6/iPhone6s 1point = 2pixel
iPhone6Plus/iPhone6s Plus
1point = 3pixel。