摘要：我们用小米举例，屏幕像素物理像素为，设备独立像素为，也就是说，一个设备独立像素就包含个物理像素，同时我们能得出。
本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，设备独立像素（devicedependent pixel）
像素像素是图像显示的基本单位，同时像素是一个抽象概念，是一个相对单位
PPIPPI全称：pixel per inch，也就是每英寸像素值，更确切的说法应该是，像素密度，也就是单位物理面积内拥有像素值的情况
假设我们有上面这幅图，大小都一样，比如是1 * 1大小，但是物理面积内的PPI分别为1，2，5，10，20，50，100。从图中很明显的看到，随着PPI的增大，像素数越来越多，图像也就越来越清晰，我们的像素的长度同时也变为了，1/1，1/2，1/5，1/10，1/20，1/50，1/100。可以得知，像素在不同的ppi下面都不同，讨论像素的大小也就没有意义了。
分辨率泛指显示系统对细节的分辨能力，能显示图像都叫显示系统，比如显示器，投影仪，照片。
分辨率常用的单位有：dpi（点每英寸），lpi（线每英寸），和ppi（像素每英寸）。从单位来看，分辨率是一个比值，与物理单位的比值。所以，当有人说这个屏幕分辨率是640*1320，你要留个心，问问单位是ppi？dpi？lpi？
retina显示屏不仅仅是屏幕的革新，对于我们深刻理解各种单位其实理解有一个很大的帮助，我们先来由浅入深的分析一下什么是retina显示屏，它提出的概念是什么？
retina采用的技术是，将更多的像素点压缩在一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，我们来看一下未使用retina屏的iPhone3GS和率先使用的iPhone 4
iphone 3GS
iphone 4
两代 iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4 的显示效果要明显好于 iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display 为例， 工作时显卡渲染出的 2880x1880 个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的 1440x900 分辨率显示屏相同，但精细度是原来的 4 倍。
注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。这个怎么理解呢？就是说，让我们看下一个设备像素的概念
设备独立像素ddp为什么是 “每四个一组”？而且要让这四个一组来显示 “原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这 “每四个一组” 的 “大像素”，可以被称作 “设备独立像素”， device independent pixel ，或者 density-independentpixel ，它可以是系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
“设备独立像素” 也有人称为 “CSS 像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。
设备独立像素与物理像素的对应关系，可以这样看：
我们再retina显示屏处挖了一个坑，现在我们要填一下。为什么桌面显示器放大分辨率就显示的内容更多呢？而retina内容不变，但是变为更加细腻？这就是设备独立像素的影响。retina的设备独立像素是固定的，当我们增加像素点时，让更多的像素点渲染一个设备独立像素所在区域，这样必然时更细腻的，但是桌面显示器，一个设备独立像素占一个坑，随着分辨率提高，像素点增加，并不会提升独立像素所包含的像素点，而是随着像素点增加，独立像素也越来越多，一个像素点对应一个独立像素，这样就显示的内容就更加多了
物理像素设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
我们在设备独立像素中提到的，为什么retina是“每四个一组”，这里的四个就表示物理像素，组成的这一组就叫设备独立像素。这个设备独立像素颇有我们前端CSS像素的味道
作为 Web 开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为 CSS 像素。
CSS 像素有什么特别的地方？我们可以借用 quirksmode 中的这个例子：
假设我们用 PC 浏览器打开一个页面，浏览器此时的宽度为 800px，页面上同时有一个 400px 宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过 “Ctrl 键” 加上 “+ 号键”），放大为 200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的 css 宽度，但是它看上去却变大了一倍——这是因为我们把 CSS 像素放大为了原来的两倍。
CSS 像素与屏幕像素 1：1 同样大小时：
CSS 像素 (黑色边框) 开始被拉伸，此时 1 个 CSS 像素大于 1 个屏幕像素
也就是说默认情况下一个 CSS 像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个 CSS 像素等于了两个物理像素宽度。在后面你会看到更复杂的情况，在高 PPI 的设备上，CSS 像素甚至在默认状态下就相当于多个物理像素的尺寸，换句话说，也就是相当于一个设备独立像素。
从上面的例子可以看出，CSS 像素从来都只是一个相对值。
设备像素比（DevicePixelRatio）设备像素比 = 设备物理像素 / 设备独立像素
设备像素比在 js 中可以通过 devicePixelRatio 的参数取得（需要页面的 viewport 设置为 content=”width=device-width”）
iPhone 4 的设备像素比为 2，线长（横向、纵向、对角线）上的物理像素数与设备独立像素数的对应关系即为 2。
根据这个对应关系，一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。
那么在我们做移动端网站时，将 viewport 设置了 content=”width=device-width”，设备独立像素也就等于 CSS 像素。
硬核总结：我以一个移动端常见的问题来将上面的名词进行一个串联。我们部门由于只做小米浏览器的开发，所以适配对于我们来讲其实并不是很复杂，因为我们的屏幕dpr主要是2/2.75/3，而我们的设计师一般设计稿也是依据iPhone 6s进行设计，所以我只分析一下dpr为3这种情况。我们前端拿到设计稿的时候，切图保存要做的第一件事，就是将切图设置为3的倍数，比如212*112，我们就手动微调为213*114，这是为什么呢？因为我们移动端需要的图片还得原图除以3，也就是图片需要是71*38。
我们上面文章有讲过，其实我们只需要了解物理像素，设备独立像素，css像素就能解决这个问题。其中物理像素和设备独立像素我们无法控制，这是人家设备已经设定好的。我们用小米5X举例，屏幕像素（物理像素）为：1080*1920，设备独立像素为：360*640，也就是说，一个设备独立像素就包含3*3个物理像素，同时我们能得出：dpr = 1080*1920 / 360*630 = 3。我们css像素其实就等于一个设备独立像素，但是我们设计师作图时，坐标系时1080*1920并不是标准的360*640，这样我们就需要将设计师的图/3，得到的就是移动端正确的大小。其实，不管你分辨率有多高，对于普通用户来讲，分辨率，物理像素有多少是最直观的评价标准。而我们前端工程师，关注的背后设备独立像素是多少，因为我们布局用的是设备独立像素而不是物理像素作为参考。所以，屏幕的分辨率是已知的，我们通过js的window.devicePixelRatio知道dpr是多少，这样就能知道设备独立像素的规格，从而设置我们的css像素与设备独立像素一致，这样我们前端就能根据进行合适的切图，还原设计稿！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116947.html
摘要：但是，在移动端，看着分辨率高达的，在控制台中却只有的分辨率，似乎有点不合逻辑。对于手机，物理像素可以在手机说明书或者官网的参数配置中查到，而设备独立像素打开控制台选择对应机型后就可以看到当然，也可以在控制台中用上面的命令查看。 最近在做移动端的开发，深入了解了下移动端适配的一些问题，加上自己的理解，记录下来，写一个小的系列博客，与大家分享。所有的问题，就开始从像素说起吧~ 像素是一个经...
摘要：设备像素设备分辨率设备像素也叫物理像素。从图中可以验证，横纵方向的设备像素数量恰好是设备独立像素的倍。像素与设备独立像素的关系缩放比例就是像素边长设备独立像素边长。因为的宽度没有改变，无论以什么单位衡量设备像素设备独立像素还是像素。 这篇文章是我在我的旧博客上发过的文章，最近又碰到这个问题，整理修改了一下发到这里。 像素单位 像素单位有设备像素、逻辑像素和CSS像素3种。 设备像素（d...
摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为，那它每英寸约含有个物理像素点。导读 移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... ...
阅读 1847·2021-11-22 15:24
阅读 1306·2021-11-12 10:36
阅读 3193·2021-09-28 09:36
阅读 1836·2021-09-02 15:15
阅读 2744·2019-08-30 15:54
阅读 2391·2019-08-30 11:02
阅读 2390·2019-08-29 13:52
阅读 3538·2019-08-26 11:53
