针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

  最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了,所以重新梳理了相关的知识,以备不时之需。

  1.ppi

  ppi指Pixels Per Inch也就是每英寸的像素点,此处的像素点就是物理像素点(也就是最小的显示单元)。 ppi描述的是像素的密度,满足以下公式

此图来源于uxabc(https://medium.com/uxabc/understanding-ui-units-8acdc0575388

2.iPhone的pt与Android的dp

  第一代iphone手机的像素密度是163ppi,但是到了iPhone4的时候像素密度是326ppi,开发者发现初代的1px和iphone4下的1px显示尺寸不相等了,无疑将增加适配的工作量,于是iphone开发者提出了一个pt的概念,即采用初代iphone1个像素点的大小作为基准,记作1pt(point),也就是说1pt在iphone4下的大小=2px的宽高。

  同样Android开发者也遇到了同样的问题,google提出的解决方案是dp(Density-Independent Pixels),基准是160ppi下的1px代表的尺寸;

  总之,pt和dp起着同样的作用,就是把它当做设计和显示的基本单位,避免使用px引发适配问题。

3.pt、dp与px之间的关系

  根据上面的描述,我们可以知道iphone4下1pt=2px,因为iphone4是326ppi,正好是基准的两倍;但是iphone6+是401ppi,那在iphone6+下1pt等于多少px呢?大多数开发者都知道是3px,可是为什么呢?我找到一个比较形象的示意图:

  按照图中所示,设计图都是按照pt来设计的, 设计图的标准是:x1,x2和x3,也就是设计图的像素为320x480,750x114,1242x2208,但是由于工艺原因,iphone6+的物理像素(分辨率)达不到1242x2208,所以只能做一次采样处理(并非缩放,因为显示尺寸并没有变化,还是5.5 inch),显示效果可能比真实的设计图差一点,但是本身分辨率已经很高了。

4.HTML中的css像素和dpr

  在HTML中不得不提到viewport,经常会设置viewport的width=device-width,那这个device-width的值是多少呢?

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  

  我们会发现在iphone5下device-width=320,iphone6下是375,iphone6+下是414,那也就是说device-width其实就是NA开发中屏幕宽度有多少pt和dp

device-width在html中也同样被解读为理想(基准)视口的宽度,即320px,375px,414px,这里的px就是指css像素,通常也被称为逻辑像素;那我们可以认为html中的css像素的显示尺寸应该和NA中的pt、dp的显示尺寸相等。

  dpr,也被成为device pixel ratio,即物理像素与逻辑像素的比,那也就不难理解:iphone6下dpr=2,iphone6+下dpr=3(考虑的是栅格化时的像素,并非真实的物理像素);

  介绍完上面的概念,我们就可以问答一开始的问题了,css中设置一DOM的height:65px,显示的高度应该和Android的65dp的元素等高。

  这些都是基础概念,并没有对前端开发过程中如何自适应做介绍,打算下一篇文档介绍一下。 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

位图和SVG用法比较

位图,亦称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时,可以看见赖以构成整个图像的无数单...

27660
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

15120
来自专栏数据小魔方

图表案例——简约却不简单的图表制作技巧

我们通常看到的小而美的图表,一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程,对图表的拆解与还原就显得非常重要。 今天的案例是关...

39190
来自专栏walterlv - 吕毅的博客

分享一个算法,计算能在任何背景色上清晰显示的前景色

发布于 2017-11-04 14:51 更新于 2018-02...

8310
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

44920
来自专栏十月梦想

移动端开发初识

对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识...

9340
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

8110
来自专栏编程

伪元素动画和转换的例子

一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。 ? 今天,我们将尝试动画和伪元素(:之前和之后)的转换,我们将发现它们的潜力。我们将讨论一下关于动画...

20950
来自专栏企鹅号快讯

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

30960
来自专栏数据小魔方

think-cell char 4——瀑布图案例应用

今天要分享的是瀑布图的两个案例应用。 因为瀑布图的用法比较特殊,在数据组织方面需要很强的技巧,所以这里再用两个案例来讲解瀑布图的用法。 ? ? 首先来看第一个案...

76270

扫码关注云+社区

领取腾讯云代金券