当前端在谈图像时,我们在谈些什么

作为一名FE,每次谈图像时对各种概念都一知半解,虽然这方面知识从来都是问问够用就行没有深究过,但也遭不住每次都问别人啊,所以总结了一下前端应该知道的图像方面的知识。

基本概念:像素,分辨率等等

像素是一张图片或显示面上组成图像的点的绝对数量。

像素的单位是px,并不是个绝对大小,而是个基本成像单元,在不同的设备上一个单元的大小是不一样的。单元尺寸越小图像越细腻。相同单元大小情况下单元越多图像尺寸越大。

分辨率是每单位尺寸所含的像素数,常用单位是DPI(Dots Per Inch,常用于印刷行业)或PPI(Pixels per inch,常用于显示设备)。分辨率越高图像越细腻。

像素密度,即PPI,每单位面积所含的像素数。

以上资料来自百科,但发现在前端中,我们所说的屏幕分辨率,在某些情况下其实就是像素值,比如我们说这个电脑显示屏是 1440*900,但大家都叫屏幕分辨率,严格的分辨率更像是一个压强一样的单位。

同理,FE中img的width或height,同理,并不是物理的绝对长度单位,而是两个维度上图片包含的像素个数,即像素值。

dip或dp,device independent pixels,设备独立像素, 一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px。 dip 与dp相同.

举个栗子:

物理尺寸 屏幕分辨率 横向dpi 纵向dpi dp与像素的比 100dp
1.5in * 2 in 240px * 320px 240/1.5 = 160 320/2 = 160dpi 160dpi / 160 =1 100dp = 1 * 100 = 100px

BT THE WAY
ReactNative中的PixelRatio.get() 其实取的就是 dpi/160 的值。也就是说,同样100px的图片,在PixelRatio为1的手机上是100dp,在为2的手机上是50dp。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 什么是DPI、PPI? DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每...
    读品走思阅读 3,642评论 0 5
  • 我们先从一个听的最多的概念——PPI开始。PPI什么是PPIPPI的复杂之处在于如果他所处的上下文环境不同,意义也...
    garble阅读 651评论 0 1
  • 看非诚勿扰,一个男嘉宾说一段过去失败的恋情-女孩不够真实。到了这个年纪,大概都会知道对方喜欢什么样的,然后就表现出...
    Chen少阅读 203评论 0 0
  • 今天特别冷,儿子还是穿着T裇戴着拉拉裤跑来跑去,我说,宝宝你去把裤子拿来,太冷了,妈妈得给你穿裤子了。儿子停下来看...
    霖少爷阅读 113评论 0 2
  • 又到月圆之夜,突然想起这应该是一个适合约会的夜晚。 听草地里蟋蟀叫声,听海浪拍打礁石的歌声,窃窃私语,说些无边际的...
    愚剑归来阅读 248评论 1 0