zoukankan      html  css  js  c++  java
  • 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得出

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

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

  • 相关阅读:
    oracle 处理找被删掉且提交了事务的数据
    java去除下划线并首字母大写
    假数据仓库-常见数据枚举(日期、月份、周几、星期几,前导零、Excel 列号)
    自然语言处理标注工具——Brat(安装、测试、使用)
    判断当前点击位置在不在某个区域内
    java调用C#程序集
    UE使用EditorUtilityWidget完成简单的编辑器内工具
    CodeForces 230B
    mac中安装启动使用jmeter步骤
    Ubuntu中samba配置过程
  • 原文地址:https://www.cnblogs.com/Flysouler-1001/p/4988696.html
Copyright © 2011-2022 走看看