iphone计算机适配,iPhone UI界面尺寸如何一稿适配

为什么出现适配？主要是更新换代的硬件屏幕分辨率不断提升，因此设计界面向上适配、向下兼容。

在开始适配话题前，先铺垫几个单位和换算：分辨率(图像分辨率ppi、设备分辨率)、像素px、磅pt、倍率。

一、单位

1.分辨率

可以从图像分辨率与显示分辨率两个方向来分类：

图像分辨率ppi，则是单位英寸中所包含的像素点数，常用表达式：水平px × 垂直px

显示分辨率，包括网屏分辨率lpi、设备分辨率dpi、角分辨率ppd等等，适配话题涉及更多的是设备分辨率dpi

2.UI领域

可以从设计与开发两方向来分类：

像素px，则是UI设计常用的虚拟单位，之所以是虚拟，是因为px不像cm、英寸等能用尺子实际测量。px只存在计算机显示领域

按操作系统不同，暂时只讨论ios、Android(安卓)、CSS前端：

磅pt，ios开发单位，同时也是印刷行业常用的单位，1pt = 1/72 英寸 = 0.35146mm

每英寸像素点dp/dip，Android(安卓)开发单位，mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi分别对应不同dpi的屏幕单位

em、ex、px、%，则是CSS前端常用单位

二、一稿适配

1.倍率倍率 = ppi / dpi

在ios开发中，苹果官方规定以 ppi = 163，dpi = 163 作为开发基准

当iphone4/4s ppi = 163，dpi = 163 时，则 1pt = 1px

当iphone5/5s/6/6s/7/8/XR ppi = 326，dpi = 163 时，则 1pt = 2px

当iphone6+/7+/8+ ppi = 401，dpi = 154 时，则 1pt = 2.6px ≈ 3px

2.pt与px换算pt =( ppi / dpi )px

同时，苹果官方也给出各型号的屏幕尺寸/寸、开发尺寸/pt ，参考倍率pt与px换算，能得出设计尺寸/px

iphone6/6s/7/8，开发尺寸375 × 667pt， ppi326 ÷ dpi163 = @2(倍率为@2，即1pt = 2px)，则设计尺寸 750 × 1334 px

3.适配尺寸一般以宽750px为基准，以iphone6/6s/7/8 设计尺寸750×1334px向上适配、向下兼容

最后总结出下表

注意，

以@2设计时，所有元素取偶数，包括字体、边距、图标图片尺寸......

以@3设计时，所有元素取同时被2和3整除的整数，即6的倍数，如6、12、18、24、30、36、42、48......

特别提醒，

向上适配iphone X/XR/XS/XS max时要考虑安全区范围，设计H5单屏界面时主操作区(和主KV)要放在750×1334px范围内，下方留白区避免在土豪机太空虚，可以加装修或“到底状态”过度

4.如此类推，Android的适配

市场上的android机型较apple的复杂，品牌竞争激烈、屏幕相对多标准化，但有向ios UI kit对齐趋势。

一般开发H5、微信小程序小游戏，取iphone6/6s/7/8 750 × 1334px(@2)设计界面。

iphone计算机适配,iPhone UI界面尺寸如何一稿适配相关推荐

iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸...
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸设备分辨 ...
iphone UI 界面尺寸
iphone计算机错误代码,iPhone刷机报错怎么办？你需要这份iPhone报错代码故障判断...
日前,果粉分享了一组目前比较全面的 iPhone 报错代码以及一些简单的故障判断,该果粉表示,多次刷机报错并且换电脑换数据线仍无效的果粉可以参考一下,一起来看看吧. 报错 -1:基带电源不正常报错 ...
IOS 开发 iPhone屏幕尺寸、分辨率及适配
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point ...
iPhone屏幕尺寸、分辨率及适配-曾梦想仗剑走天涯
1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...
关于iPhone屏幕尺寸、分辨率及适配
1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...
iOS 屏幕尺寸、分辨率、适配、UI规范
.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2 ...
html5开发之ios屏幕适配,iOS开发屏幕尺寸以及屏幕适配等问题（转载内容）
原帖地址:http://blog.csdn.net/phunxm/article/details/42174937/ 仅供我个人收藏学习,原博主如不同意请联系qq651263878进行删除,在此表示感 ...
iOS 屏幕尺寸、分辨率、适配
1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...
ios学习7_iPhone屏幕尺寸、分辨率及适配
1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...

iphone计算机适配,iPhone UI界面尺寸如何一稿适配

iphone计算机适配,iPhone UI界面尺寸如何一稿适配相关推荐

最新文章

热门文章