基本概念

- 逻辑分辨率 pt (point),物理分辨率 px (pixel)
- 缩放因子 scale 或者 dpr, scale ≈ px / pt
- 缩放采样 例如 iPhone 6 Plus,100 pt x @3 / 1.15
- 像素密度 PPI (Pixel Per Inch):
例如 iPhone 4 ![](https://img2018.cnblogs.com/blog/535719/201812/535719-20181214110936372-205457607.png)
- DPI(Dots Per Inch)表示一平方英寸上的像素点,适合不同设备之间性能比较
- rem,如果 html 的 font-size 设置陈100px,宽为 0.3rem 的图片实际呈现的设备像素宽度是100*0.3=30px,h5对一般屏或大屏 font-size:100px,小屏 90px

等比例缩放

如:淘宝、京东 首页

文字流

保持相同文字大小,让大屏幕显示更多内容,如:豆瓣列表页

弹性控件

混合

图片 按照屏幕尺寸 缩放,文字按照文字流,如:网易音乐,图片缩放,文字显示更多

iPhone屏幕分辨率和适配规则 图片文字适配的更多相关文章

  1. iOS AppIcon + launchImage+iPhone 屏幕分辨率相关知识

    本文主要包含不同iOS 版本的尺寸,分辨率,以及appIcon,launchImage 对不同iOS 版本的适配问题 以下是主要主要的参考资料 https://developer.apple.com/ ...

  2. iPhone 屏幕分辨率

    5S     640 x 1136 5       640 x 1136 4s     640 x 960 4       640 x 960 3gs   320 x 480

  3. iPhone屏幕尺寸、分辨率及适配

    转:http://blog.csdn.net/phunxm/article/details/42174937 目录(?)[+]   1.iPhone尺寸规格 设备 iPhone 宽 Width 高 H ...

  4. 【转】iPhone屏幕尺寸、分辨率及适配

    原文网址:http://blog.csdn.net/phunxm/article/details/42174937 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角 ...

  5. android 图片大小适配,如何在不同屏幕上适配图片,如何设置可以自适应不同分辨率?

    android 图片大小适配,如何在不同屏幕上适配图片,如何设置可以自适应不同分辨率? Android为了适应不同的分辨率,需要将不同的图片放到不同的drawable目录下,分辨率的匹配规则如下:dr ...

  6. 【转载】iPhone屏幕尺寸、分辨率及适配

    iPhone屏幕尺寸.分辨率及适配 转载http://m.blog.csdn.net/article/details?id=42174937 1.iPhone尺寸规格 iPhone 整机宽度Width ...

  7. 转: iPhone屏幕尺寸、分辨率及适配

    1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...

  8. 大屏iPhone的适配 +iOS 图片尺寸要求

    摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Re ...

  9. iOS:界面适配(三)--iPhone不同机型或设备不同尺寸适配(屏幕适配)和系统适配

    对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>.        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片 ...

随机推荐

  1. 使用Java监控工具出现 Can't attach to the process

    问题重现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ➜ jinfo -flags 3032 Attaching ...

  2. 从OsChina Git下载项目到MyEclipse中

    前提是,拥有权限下载 1.进入MyEclipse,点击File-->Import,选择Git,点击“Next”,如下图: , 2.选择“URI”,点击"Next" 3.输入项 ...

  3. vue+窗格切换+田字+dicom显示_02

    环境:vue+webpack+cornerstone ide:vs code 需求:窗格设置+拼图设置 分析: 由于时间的原因,我也没有Baidu更好的显示窗格的方法,所以使用比较笨的方法,通过组件显 ...

  4. 九、非主体机构元素——header元素、footer元素、address元素、网页编排

    header元素 一般用来放置整个页面的标题,比如说一个新闻页面,header一般放新闻的标题,如果是一个官方网址,一般header用来放logo和网站导航. <!DOCTYPE html> ...

  5. 【亲测】502 Bad Gateway 怎么解决?

    502 Bad Gateway 怎么解决? 1.什么是502 badgateway 报错 简单来说 502 是报错类型代码,bad gateway 错误的网关. 2.产生错误的原因 连接超时 具体原因 ...

  6. 这可能是目前最新的 Vue 相关开源项目库汇总(转)

    访问地址:https://juejin.im/entry/58bf745fa22b9d0058895a58 原文链接:https://github.com/opendigg/awesome-githu ...

  7. 6. 添加messager.alert()确定按钮的回调函数,即点完确定按钮后触发的事件

    添加messager.alert()确定按钮的回调函数,即点完确定按钮后触发的事件: $.messager.alert('提示信息', "请联系管理员处理!", 'info', f ...

  8. git自定义项目钩子和全局钩子

    钩子介绍 自定义钩子分为:项目钩子和全局钩子 自定义全局钩子: 全局钩子目录结构: (注意:excludes目录结构是我们自定义的目录,规则逻辑在update.d/update.py脚本里实现的,非g ...

  9. 预浸料(Prepreg,PreimpregnatedMaterials)

    预浸料(Prepreg,PreimpregnatedMaterials),是把基体(Matrix)浸渍在强化纤维(Reinforced Fiber)中制成的预浸片材产品,是复合材料的中间材料.

  10. 关于ES6兼容IE 问题记录之一

    这两天在做前端网页时,遇到一个问题,页面打开发生乱码,如下: 现象:360 浏览器,在急速模式下(即谷歌模式)是OK的显示,第一张图布局OK:在兼容模式下(即IE模式)是显示NG的,第二张图布局乱码 ...