ios 适配 (字体 以及 控件)

ios 字体适配ios

先看市面上iPhone四、五、6/6p的分辨率:app

iphone4 :iphone

点数: 320x480 pt编辑器

渲染像素: 640x960 px布局

屏幕分辨率:640x960 px字体

iphone5:spa

点数: 320x568 pt图片

渲染像素: 640x1136 pxip

屏幕分辨率:640x1136 pxio

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倍。

 

因此: iPhone四、iPhone五、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得出

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

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

相关文章
相关标签/搜索