摘要：对于开发人员来说，只要设置的两个屏幕逻辑像素相同，它们的显示效果就是相同的。无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。
我们说的分辨率，
比如
iphone4的分辨率是 960 * 640 —这个是单位是点，标识设备屏幕上有多少显示单元，每个显示单元，可以理解一个个物理的发光二极管
iphone4的尺寸是3.5in，说的是物理的尺寸，对角线的长度，对应我们常说的物理单位，cm，m这种。
思考一下，是不是我的分辨率越高，就显示的越清晰？
NO， 分辨率高未必清晰，我都见过那种很大led广告屏，分辨率高啊，几千几万，但是仍然能看到明显的颗粒度。
在仔细一想，其实清晰不清晰，主要看的是单位密度(ppi)而不是设备总像素的多少。是不是单位密度越高，显示的细节越清晰啊。
有没有发现，所有的这些都是和具体的设备挂钩的。谈像素谈尺寸，都是离不开具体的设备。
但是有个问题，为啥又引入dp的概念，独立设备像素呢。
物理像素对应设备像素不是挺好？
好吗？
对于开发人员来说，设备千千万。分辨率千差万别。
你想一下，如果同样3.5寸的屏幕上，我有个列表
宽度都是100%，高度我设置 20
你会发现，分辨率高的屏幕上，高度特别小，宽度特别长。反倒是
分辨率高的显示的不清晰(跟蚂蚁一样，密度太高，物理上看起来就小的很)
这可咋整啊。
设备厂商也郁闷了，草尼玛，老子辛辛苦苦提高分辨率，出力不讨好啊。
有啥办法，看起来物理上的高度和宽度都一致，但是更清晰的。
有没有什么办法解决啊！
于是大家一合计，你是ppi高吗？那我定义一个单位，
这就引出的独立设备像素，顾名思义，就是独立于设备的像素。
我就定义一个逻辑单位，dp
dp有多大呢，dp就有小指头的上方的一小块这么大（笑笑）。
你们呢都，尽量往上靠，高的你就在设备层面转化物理像素的时候，放大一下。
低的呢，你就缩小一点。
这样看起来，大家是不是差不多大了。
对于开发人员来说，只要设置的两个屏幕逻辑像素相同，它们的显示效果就是相同的。
是不是很爽。
大家一总结，发现把设备按照ppi分一下，大概是这么个比例：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
不难发现，真正决定显示效果的，是逻辑像素尺寸(独立设备像素)。
有人问了，我一个前端懂这些有卵子用。
移动端页面的绝对单位就是px啊，我设置dp也不支持啊(草！！!为啥不支持dp?)
px和dp有啥关系？你想啊，浏览器也是设备上的应用，也是按照设备的缩放比缩放的。
具体可以对照一下, 缩放比：
1dp=1px（mdpi、iPhone 3gs）
1dp=1.5px（hdpi）
1dp=2px（xhdpi、iPhone 4s/5/6）
1dp=3px（xxhdpi、iPhone 6）
1dp=4px（xxxhdpi）
你再想想，不支持dp也行啊，你不是不支持吗？
老子自己造，自己的轮船自己造（哈哈！笑）
既然我都知道缩放比了，老子自己换算一下不就ok了。
嗯，对了，就你最聪明！！
哈哈，所以就有了rem的解决方案。
ps: 如何和设计沟通?
单位决定了我们的思考方式。
在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。
设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。
给出的界面元素尺寸就不统一了。
Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。
而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素
。
所以为了保证准确高效的沟通，双方要以逻辑像素尺寸来描述和理解界面。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100687.html
摘要：在移动端开发的过程中大家都会发现，移动端的显示一般与桌面端的不一样。像素讲了这么多概念，仿佛还是没有很好地解释文章开头的问题。上面所指出的这种抽象单位称为设备无关像素。 在移动端开发的过程中大家都会发现，移动端的显示一般与桌面端的不一样。比如在iphone6上显示一个1334x750像素大小块状元素，虽然在苹果官网上iphone6标称的屏幕像素密度是1334x750规格，但是我们却发现...
摘要：在移动端开发的过程中大家都会发现，移动端的显示一般与桌面端的不一样。像素讲了这么多概念，仿佛还是没有很好地解释文章开头的问题。上面所指出的这种抽象单位称为设备无关像素。 在移动端开发的过程中大家都会发现，移动端的显示一般与桌面端的不一样。比如在iphone6上显示一个1334x750像素大小块状元素，虽然在苹果官网上iphone6标称的屏幕像素密度是1334x750规格，但是我们却发现...
摘要：它能给予一个关于你使用何种设备的正式结论，并且能通过获得。宽度两倍，高度两倍，总体四倍。视口的作用是限制元素，元素是所有网页块元素中最高一级的元素。视口并非一个结构，其不受控制。重点是上诉结论是在缩放的条件下成立的。 原文地址：http://quirksmode.org/mobile/... 这篇小短文中，我将会介绍关于viewport与诸如html元素，window 对象，scree...
摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...
摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...
阅读 3094·2021-09-22 15:05
阅读 2708·2019-08-30 15:56
阅读 995·2019-08-29 17:09
阅读 744·2019-08-29 15:12
阅读 2028·2019-08-26 11:55
阅读 2941·2019-08-26 11:52
阅读 3325·2019-08-26 10:29
阅读 1328·2019-08-23 17:19
