响应式布局基础一:px、dpi、ppi的区别
来源:互联网 发布:tensorflow dense 编辑:程序博客网 时间:2024/06/05 15:31
px,即pixel,像素的意思。
像素有两种,一种是物理像素,一种逻辑像素。
以前一个逻辑像素是等于一个物理像素的。当一个逻辑像素对应多个物理像素的时候,这时候,显示会更清楚。
一个逻辑像素对应多少个物理像素,这个叫做Device pixel ratio(像素设备比)
在开发过程中,css通常使用逻辑像素,也称为设备独立像素。
还有两个概念:
Dpi(dot per inch):点/每英寸
Ppi(pixel per inch):像素/每英寸
为什么使用长度单位来表达二维的量呢?
这是因为这里的英寸,代表的是对角线。
Dpi和ppi有什么区别呢?
有些屏幕的一个像素,需要几个点来显示。(dppx:dot per pixel,也称dpr)
例如在iPhone4设备屏幕中的物理像素数为640*960px,而CSS逻辑像素数为320*480像素。因此,使用大约4个物理像素来显示一个CSS像素。(4dppx或者说是4dpr)
在进行web设计的时候,更关注的是dpr,而不是dpi。
dpr如何查询得到呢?
通过js代码window.devicePixelRatio。
经测试,魅蓝note的dpr为3
当美工按照设备像素设计设计稿的时候,我们需要参照相关设备像素比进行换算成对应的逻辑像素(css像素)
参考资料:
知乎上:http://www.zhihu.com/question/27261444
DEV资讯:www.devstore.cn/new/newInfo/850.html
移动端适配方案一
0 0
- 响应式布局基础一:px、dpi、ppi的区别
- Android中dp、dip、dpi、ppi、px、sp的区别
- dpi ppi px pt dp sp区别
- DPI和PPI的区别
- dp的定义原理和dpi,ppi,px,pt,sp之间的区别
- PX DPI PPI等概念
- 手机分辨率PPI和DPI的区别
- px、pt、ppi、dpi、dp、sp之间的关系
- px、pt、ppi、dpi、dp、sp之间的关系
- px、pt、ppi、dpi、dp、sp之间的关系
- DPI和PPI区别
- DPI和PPI区别
- dp, dpi, ppi, sp, px 详细介绍
- UI设计学习--PPI、DPI、PX、DP
- dp、sp、px、dpi、ppi、pt详解
- 浅谈dp px ppi dpr dpi
- 设计中各单位的转换px、pt、ppi、dpi、dp、sp及IOS的分辨率
- 扒一扒那些px、pt、ppi、dpi、dp、sp之间的关系
- hdu 1879
- Perfect Squares
- PHP面向对象开发,关于调用父类构造器的问题
- 基于layer mobile手机端弹出框,询问框(PC端推荐layer和artDialog:http://download.csdn.net/download/cometwo/9437895)
- iOS将产品进行多语言发布,开发
- 响应式布局基础一:px、dpi、ppi的区别
- Core Graphics 框架学习笔记,以及demo
- sizeof使用
- 常见网络协议端口号整理
- 命令行操作记录
- java学习日记——Inner Class(内部类)
- TCP协议与UDP协议
- android点击键盘外部关闭键盘的方法
- VS2015--win32工程配置的一些想法之在 Visual Studio 2015 中进行调试的同时分析性能