星空网 > 软件开发 > 网页设计

移动web开发之像素和DPR

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

前面的话

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

 

定义

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

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

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

移动web开发之像素和DPR

 

分类

  实际上像素分为两种:设备像素和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像素完全覆盖了一个设备像素 

移动web开发之像素和DPR 

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

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

移动web开发之像素和DPR移动web开发之像素和DPR

  不论我们进行缩小或放大操作,元素设置的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

移动web开发之像素和DPR

 

API

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

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

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

移动web开发之像素和DPR
  所以,iphone5的屏幕尺寸是568px*320px,设备像素比DPR是2,分辨率是1136pt*640pt



原标题:移动web开发之像素和DPR

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海外仓的规模:https://www.goluckyvip.com/tag/94434.html
美西海外仓一件代发:https://www.goluckyvip.com/tag/94435.html
kw海外直邮1号仓:https://www.goluckyvip.com/tag/94436.html
乐歌 海外仓:https://www.goluckyvip.com/tag/94437.html
海外仓与外贸:https://www.goluckyvip.com/tag/94438.html
易仓 海外仓:https://www.goluckyvip.com/tag/94440.html
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流