这篇文章要弄清楚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. 【Mongodb教程 第十五课 】MongoDB 限制记录

    Limit() 方法 要限制 MongoDB 中的记录,需要使用 limit() 方法. limit() 方法接受一个数字型的参数,这是要显示的文档数. 语法: limit() 方法的基本语法如下 & ...

  2. 【Mongodb教程 第十课 】MongoDB 备份

    MongoDB 数据转储 创建备份MongoDB中的数据库,应该使用mongodump命令.此命令将服务器的所有数据转储到转储目录.有许多可供选择,通过它可以限制的数据量或创建备份您的远程服务器. 语 ...

  3. maven导入dom4j以及jaxen.jar报java.lang.UnsupportedOperationException:错误

    <dependency> <groupId>jaxen</groupId> <artifactId>jaxen</artifactId> & ...

  4. git 删除目录

    1. 查看本地已经被删除的文件 2. 删除 目录以及目录下的文件 [root@test01 h2_mopub_replace]# git rm ../test_code_driver -r 3. [r ...

  5. Mac下Apache+MySQL+PHP安装

    max下是自带有Apache和php的服务器的,不需要另外安装,本文就对相关配置进行介绍. 第一:Apache 在终端中输入,下面指令即可启动Apache服务器: //启动 sudo apachect ...

  6. SSH无密码验证可能出现的问题

    雪影工作室版权所有,转载请注明[http://blog.csdn.net/lina791211] 一.安装和启动SSH协议 假设没有安装ssh和rsync,可以通过下面命令进行安装. sudo apt ...

  7. yummain.py install yum 不能运行的原因 yummain.py not found

    [root@akinlau ~] wget http://tel.mirrors.163.com/centos/6/os/x86_64/Packages/python-urlgrabber-3.9.1 ...

  8. Django's CSRF mechanism

    Forbidden (403) CSRF verification failed. Request aborted. You are seeing this message because this ...

  9. js加减乘除丢失精度

    js加减乘除(学了那么久现在才注意到汗==!) /** ** 除法函数,用来得到精确的除法结果 ** 说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精 ...

  10. Serializable and XmlEnum

    The easiest way is to use [XmlEnum] attribute like so: [Serializable] public enum EnumToSerialize { ...