这篇文章要弄清楚2个问题:一、什么是逻辑像素和物理像素;二、这两者有什么关系。

  对于问题一,先抛出两个概念。我们经常使用的px就是逻辑像素,是浏览器使用的抽象单位;物理像素又和dp/pt(设备无关像素)、dpr(设备像素缩放比)有关。对于问题二,逻辑像素和物理像素可以通过下面的公式转换:1px=(dpr^2)dp.

  那么现在问题来了,对于不同设备,dpr又是多少呢?

  我们可以通过下表来确定不同设备的dpr:

  retina屏dpr都大于等于2。

  上面的表格发现ppi,那又是什么东东呢?

  ppi是物理设备的屏幕每英寸的像素数量,即像素密度。不好理解的话,我就举个实例,满大街都是的LED屏(商店门口和公交车上显示信息的那块电子屏),其实里面是一排排的发光二极管,通过让不同位置的二极管发光来组合成一定的信息。想象一下,如果只有4个二极管,是不是很难显示出复杂的图案?但是如果有很多呢?是不是二极管密度越大,更容易显示出复杂的信息,而且图案看起来更细腻?说到这里,ppi就很好理解了吧。

  ppi可以通过下面的公式计算:

  举个栗子:iPhone 5的屏幕ppi计算,iPhone 5屏幕分辨率为1136x640像素,屏幕尺寸为4英寸。代入公式ppi=√(1136²+640²) / 4,结果为326ppi。

  现在我们实际运用一下公式1px=(dpr^2)dp。先假设有一个dpr为2的设备,那么,1px=2*2dp,表示1px需要设备用4个像素点来渲染,如下图:

  在平面上,四个像素点排列成正方形,组成一个1px的点。那么可以推出,在直线上,1px=2dp。

  那么,iPhone 5屏幕ppi为326>320,故dpr=2  =>  1px=2dp  =>  设备分辨率1136x640转换为逻辑像素为568x320px,即320x568px。

  到这里,于是我们知道了什么是逻辑像素,什么是物理像素,以及两者要怎么换算。

参考:

《Hello,移动WEB——pixel像素基础》http://www.imooc.com/video/9564/0

移动web开发基础(一)——像素的更多相关文章

  1. [置顶] 提高生产力:Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  2. 提高生产力:Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  3. H5开发基础之像素、分辨率、DPI、PPI

    H5开发基础之像素.分辨率.DPI.PPI  html5  阅读约 4 分钟 ​2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小 ...

  4. 第五模块:WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  5. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  6. PHP 系列:PHP Web 开发基础

    PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集 ...

  7. 移动WEB开发基础入门

    什么是移动WEB开发,我个人理解就是,将网页更好的显示在移动端的一些设置,简单来说就两点如下: 1.流式布局,即百分比自适应布局 将body下的div容器的样式设置如下: div{ width:100 ...

  8. 第五模块:WEB开发基础 第3章·BootStrap&JQuery开发

    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...

  9. Web开发基础知识

    综述 最近开始Java Web方面的工作,千里之行始于足下,我们在开发过程中要善于总结自己遇到的问题.善于管理一些优秀的代码片段.本文的主要内容是Web开发的基础知识,对于大牛来说可以忽略,对于初入W ...

  10. web开发基础--字节序

    字节是网络传输上的最小单位,是web开发中需要了解的一个知识点. 1.有效位 在谈字节序前需要先了解有效位,有效位分为两种:最低有效位(LSB: Least Significant Bit) 和最高有 ...

随机推荐

  1. soapUI系列之—-07 调用JIRA Rest API接口【例】

    一.调用JIRA接口------实现过滤器搜索问题 1. 在SoapUI中新建 REST Project, 在URI 中输入登录接口的 url (任意一个 Rest 接口的 url 都可以): 2. ...

  2. 在类的头文件里尽量少引入其它头文件 <<Effective Objective-C>>

    与C 和C++ 一样,Objective-C 也使用"头文件"(header file) 与"实现文件"(implementation file)来区隔代码.用 ...

  3. 2016/3/30 ①投票checkbox ②进度条两个div套起百分比控制内div(width) <div><div></div></div> ③数据库test2 表 diaoyan... 35岁发展方向投票

    分两个页面,要点:提交form 相连action method  两个页面可以合成一个页面action传到自身页面   但分开较清晰 第一个页面vote.php <!DOCTYPE html P ...

  4. 记一次部署java项目的问题

    项目里面有自动化任务, tomcat 错误信息 Table 'xxx.QRTZ_TRIGGERS' doesn't exist 提示在mysql中找不到这个表. 但mysql中确实存在,但名字是:qr ...

  5. 安卓输入子系统之inotify与epoll机制【学习笔记】【原创】

    平台信息:内核:linux3.1.0系统:android5.0平台:tiny4412 作者:庄泽彬(欢迎转载,请注明作者) 说明: 韦老师的安卓视频学习笔记 一.在安卓的输入子系统中如何监听文件的产生 ...

  6. POJ - 1422 Air Raid(DAG的最小路径覆盖数)

    1.一个有向无环图(DAG),M个点,K条有向边,求DAG的最小路径覆盖数 2.DAG的最小路径覆盖数=DAG图中的节点数-相应二分图中的最大匹配数 3. /* 顶点编号从0开始的 邻接矩阵(匈牙利算 ...

  7. I.MX6Q MfgTool2 ucl2.xml eMMC

    /**************************************************************************** * I.MX6Q MfgTool2 ucl2 ...

  8. 洛谷P2679 子串——DP

    题目:https://www.luogu.org/problemnew/show/P2679 DP水题: 然而被摆了一道,下面加 // 的地方都是一开始没写好的地方...还是不周密: 仔细审题啊... ...

  9. c++性能测试工具:google benchmark入门(二)

    上一篇中我们初步体验了google benchmark的使用,在本文中我们将更进一步深入了解google benchmark的常用方法. 本文索引 向测试用例传递参数 简化多个类似测试用例的生成 使用 ...

  10. vs2010统计代码行数

    参考:http://www.cnblogs.com/zfanlong1314/archive/2013/03/08/2950100.html 正则表达式:^:b*[^:b#/]+.*$ 文件类型:*. ...