你的位置:首页 > 网页设计

[网页设计]移动web开发之像素和DPR


×
目录
[1]定义 [2]分类 [3]3P[4]缩放[5]DPR[6]API

前面的话

  像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就说不清楚了。本文将介绍关于像素的相关知识

 

定义

  像素,又称画素,是图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为pel(picture element)

  像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时,屏幕能显示的画面的过渡更细致,网站看起来更明快。

  //ppi是指屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度

 

分类

  实际上像素分为两种:设备像素和CSS像素

  1、设备像素(device independent pixels): 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的

  2、CSS像素(CSS pixels): 又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层

//我们通过CSS和javascript代码设置的像素都是逻辑像素width:300px;font-size: 16px;

 

DP/PT/SP

  有些人将DP、PT、SP这三个概念简称为3P,貌似又是新名词,实际上,仅仅是物理像素的3种称呼

  IOS中的物理像素叫做PT(Point,显示点)

  Android中叫做DP/DiP(Device independent Pixel,设备无关像素)

  SP(Scale-independent pixel)是缩放无关的像素,与DP和PT一样都是物理像素,只不过用于描述字体的大小

  我们常说的手机屏幕分辨率的像素单位指的是物理像素,比如iphone5s分辨率是1136*640,实际上是1136pt*640pt

 

缩放

  在桌面端,css的1个像素往往都是对应着电脑屏幕的1个物理像素。

  //一个CSS像素完全覆盖了一个设备像素 

 

  而在手机端,由于屏幕尺寸的限制,缩放是经常性的操作。

  //设备像素(深蓝色背景)、CSS像素(半透明背景)
  //左图表示当用户进行缩小操作时,一个设备像素覆盖了多个CSS像素
  //右图表示当用户进行放大操作时,一个CSS像素覆盖了多个设备像素

  不论我们进行缩小或放大操作,元素设置的CSS像素(如width:300px)是始终不变的,而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的

 

DPR

  设备像素比DPR(devicePixelRatio)是两个像素的比值

DPR = 设备像素 / CSS像素(某一方向上)

  在早先的移动设备中,并没有DPR的概念,因为设备像素和CSS像素总是相等的。随着技术的发展,移动设备的屏幕像素密度越来越高。从iphone4开始,苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是DPR = 2

  以iphone5为例,iphone5的设备分辨率640dp*1136dp,而CSS表示为320px*568px。所以iphone5的DPI=2

  640(dp) / 320(px) = 2  1136(dp) / 568(px) = 2  640(dp)*1136(dp) / 320(px)*568(px) = 4

 

API

  对于屏幕设备像素和设备像素比DPR都有相应的javascript属性

  screen.width 屏幕宽度  screen.height 屏幕高度  window.devicePixelRatio 设备像素比

  [注意]前面介绍过,通过CSS和javascript代码设置的像素都是逻辑像素(CSS像素),所以获取到的屏幕宽度和高度的单位也是px


  所以,iphone5的屏幕尺寸是568px*320px,设备像素比DPR是2,分辨率是1136pt*640pt