2015-07-07 15:01:05 huangchnegdada 阅读数 7247

Xcode 6设置启动页面图片尺寸

Xcode启动页面设置

iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3x
iPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2x

iPhone Portrait iOS 7,8-2x (640×960) @2x
iPhone Portrait iOS 7,8-Retina 4 (640×1136) @2x

iPhone Portrait iOS 5,6-1x (320×480) @1x
iPhone Portrait iOS 5,6-2x (640×960) @2x
iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

2017-08-31 18:52:38 q1194259339 阅读数 486

UI规范:

iOS

屏幕大小(单位为像素px):

44s640*960     @2x

55s5c640*1136   @2x

66s7750*1134   @2x

6p7p:标准模式:1242*2208放大模式:1125*2001(即61.5倍) @3x


关于 .png@2x.png@3x.png的关系:

可以理解为屏幕上的点对应的像素多少。

.png表示一个点对应一个像素,@2x.png表示一个点对应两个像素,@3x.png表示一个点对应三个像素。


设计图标准:

理论上应该出3套设计图切出.png@2x.png@3x.png的图标

传统方法:设计出640*960的设计图并标注,以此为基础切出.png@2x.png的图标

                  再设计套1242*2208的设计图,切出@3x的图标


个人喜爱:(此套设计方案与Android通用,即设计完了切完图安卓可以直接用)

为了方便设计,按照750*1334的尺寸来设计并以此做标注,然后等比放大1.5倍做成宽度为1125的设计图,

来切@3x的图标(图片除外)。输出750 的带标记设计图和@3x的图标。

有了三倍图就可以做出一倍和两倍图(一般只需要三倍和两倍。至少需要的是三倍图)。



图标设计规范:

1.图标长宽像素为偶数(按照1125做出的图最好是6的倍数。),屏幕显示图标大小为像素大小除2。例:图大小为20*20

2.图标名字最好在设计的时候就命名好。


命名规则:

1.尽量用英文。

2.尽量用驼峰命名方式。例:homepage ->homePage

3.命名:所在页面_功能_状态_编号.png(没有的可以不写),用 下划线 连接

例:homePage_back_normal_01.png(没有编号例:homePage_back_normal.png)。

ps 命名只是大体这么写,具体的看具体情况,目的是为了每个不相同的图标名字都不相同

(虽然现在有的开发感觉无所谓,但是我是个强迫症)。


标注规范:

1.单位为像素px

2.颜色用RGB格式。


总结:

特别懒:一套750的标注设计图 + 一套三倍图。

特别乖:一套750的标注设计图 + 一套三倍图+一套二倍图+规范命名。

2020-01-21 10:41:17 github_39570717 阅读数 99

项目中做了移动端rem适配的,然而发现电脑上可行,在苹果手机上却无法显示,

查了一下,发现iOS Safari只支持标准的canvas,标准的canvas只支持px不支持rem。

上网找了一下,解决方法:

将rem转换回px

//UI设计基础宽度:750px;
ctx.font = 3*12.5+"px sans-serif";

但是移动端有各种宽度的屏幕,为了适应各种屏幕是不能写死,所以最终下法应该如下:

//获取设备宽度
let  clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas font字体的占比进行设置
let fontWidth = clientWidth*3*12.5/750;
//设置自适应的字体大小
ctx.font = fontWidth+"px sans-serif";

 

2017-03-06 15:07:56 qiuqi12 阅读数 433


iPhone Portrait iOS 8,9Retina HD 5.5 (1242×2208) @3x
iPhone Portrait iOS 8,9Retina HD 4.7 (750×1334) @2x

iPhone Portrait iOS 7,8-2x (640×960) @2x
iPhone Portrait iOS 7,8-Retina 4 (640×1136) @2x

iPhone Portrait iOS 5,6-1x (320×480) @1x
iPhone Portrait iOS 5,6-2x (640×960) @2x
iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

2015-10-06 21:16:52 icetime17 阅读数 5499

iPhone 6的屏幕分辨率为 750 * 1334, iPhone 6 plus的标准模式的屏幕分辨率为1242 * 2208. 而iPhone 6 plus允许设置放大模式, 以适应大屏幕的特定需求. 而采用放大模式后, 屏幕分辨率变为1125 * 2001, 为iPhone 6屏幕分辨率的1.5倍. 所以, 在通过屏幕分辨率来决定机型的时候, 要加入对于iPhone 6 plus的放大模式的考虑.

#define iPhone4 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(640, 960), [[UIScreen mainScreen] currentMode].size) : NO)
#define iPhone5 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(640, 1136), [[UIScreen mainScreen] currentMode].size) : NO)
#define iPhone6 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(750, 1334), [[UIScreen mainScreen] currentMode].size) : NO)
#define iPhone6Plus ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1242, 2208), [[UIScreen mainScreen] currentMode].size) : NO)
#define iPhone6PlusBigMode ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2001), [[UIScreen mainScreen] currentMode].size) : NO)

#define GScreenSize   [[UIScreen mainScreen] bounds].size
#define GScreenWidth  [[UIScreen mainScreen] bounds].size.width
#define GScreenHeight [[UIScreen mainScreen] bounds].size.height
没有更多推荐了,返回首页