• ios 适配 (字体 以及 控件)


    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得出

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

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

  • 相关阅读:
    最课程阶段大作业03:用半天实现淘宝首页?
    最课程阶段大作业02:实现自己的利息计算器
    最课程阶段大作业之01:使用SVN实现版本控制
    Java全栈程序员之01:做个Linux下的程序猿
    最课程学员启示录:这么PL的小姐姐你要不要
    学员优秀博文赏析:泛型通配符及约束
    魅族便签,是否能成为国内便签应用的No.1?
    Ubuntu上安装git和创建工作区和提交文件!!!
    OpenGL核心技术之HDR
    病毒木马查杀实战第020篇:Ring3层主动防御之基本原理
  • 原文地址:https://www.cnblogs.com/Flysouler-1001/p/4988696.html
Copyright © 2020-2023  润新知