ios 适配 (字体 以及 控件)

时间:2015-11-23 16:46:01   收藏:0   阅读:6766

ios 字体适配

先看市面上iPhone4、5、6/6p的分辨率:

iphone4 :

点数: 320x480 pt

渲染像素: 640x960 px

屏幕分辨率:640x960 px

iphone5:

点数: 320x568 pt

渲染像素: 640x1136 px

屏幕分辨率:640x1136 px

iphone6:

点数: 375x667 pt

渲染像素: 750x1334 px

屏幕分辨率:750x1134 px

iphone6plus:

点数: 414x736 pt

渲染像素: 1242x2208 px

屏幕分辨率:1920x1080 px

 

另外, iPhone6 Plus和iPhone6 都有标准模式和放大模式两种渲染分辨率:

iPhone6: 标准模式:750x1334 px ; 放大模式:640x1136 px

iPhone6 Plus:标准模式:1242x2208 px; 放大模式:1125x2001 px

iPhone6 Plus的放大模式是iPhone6的标准模式的1.5倍。

 

由上面的分辨率可得出结论:

1. iPhone4和iPhone5宽度是一样的, 高度不同所以4和5采用同一套字体规范;

2. iPhone6的放大模式正好和iPhone5的分辨率相同, 所以6和5采用一套字体规范;

3. iPhone6的标准模式为750x1334 px, 放大1.5倍正好是iPhone6 Plus的放大模式分辨率 1125x2001 px, 所以iPhone6 Plus的字体规范等于iPhone6的整体放大1.5倍。

 

所以: iPhone4、iPhone5、iPhone6共用一套字体规范;而iPhone6 Plus在放大模式下的字体正好是iphone6的基础上放大1.5倍。

 

下面我们来看看iOS上具体字体常用字号规律:

1. 作为对照, 正文样式在大字号下使用34px字体大小, 最小也不应小于22px。

2. 通常来说, 每一档文字大小设置的字体大小和行间距的差异是2px, 一般为了区别开标题和正文 字体大小差异至少要是4px。

3. 标题和正文样式使用一样的字体大小。 为了将其和正文区分开, 标题样式使用中等效果。

 

个人理解:

  字体适配的话, 在6p下面1.5倍的字体会显得很大,对于放大模式下的体验还是不错的, 不过标准模式下的效果会更加精细一些, 所以标准模式下的适配最好根据机型来进行适配, 或者根据屏幕宽度来进行适配, 这样有个好处:就是5和4保证用的是同一套字体规范, 6 单独一套, 6p也是单独一套字体规范。

 

iOS控件适配

由于4, 5, 6, 6plus的分辨率不相同, 我们要按下面三种适配规则进行多屏幕适配:

1. 文字流式

  这个形式类似于window上文本编辑器的自动换行----- 较宽的屏幕文字显示多一些, 窄的屏幕文字显示少一些。文字根据屏幕的宽度进行自动布局。

显示文字的控件不能给固定值, 要根据屏幕的宽度进行自动布局。

 

2. 弹性控件

  就是界面元素垂直方向上高度不变; 水平方向上宽度变化时,通过调整元素间距或元素右对齐的方式自适应。

简而言之, 就是控件高度不变, 宽度对屏幕进行适配。

 

3. 等比缩放

  有些元素适配到大屏幕时,例如图片, 在大屏幕上要做等比放大, 这样看着更舒服一些。

 

 

总结:由网易新闻的app得出

头条一栏: 所有设备上控件的高度一样 , 里面的字体大小也是一样, 这里用了文字弹性控件

图片: 这列根据屏幕的宽度进行了等比缩放适配。字体也是进行了等比适配。 还有文字流式适配。

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!