---

前言

在移动端有一个概念叫做多倍图，这时我就产生了一个问题，为什么要使用多倍图呢？ pc端开发页面时1px就是一个像素，而到了移动端开发为什么1px就对应多个像素了呢？

---

首先需要了解一些前提概念

一、前提概念

1.分辨率与物理尺寸关系

目前绝大部分显示器都是基于点阵的

通过一系列的小点排成一个大矩形，每个小点显示不同的颜色来形成图像，我们把每个小点称为一个像素 (pixel)。

对于一块具体的显示器，在一个具体的设置下，总像素的个数是固定的，可以具体数出来，我们把显示器有多少行多少列像素叫做显示器的“分辨率 (geometry)”，表示方法是“宽度像素个数x高度像素个数”

同样的分辨率下，每个小点的尺寸仍然是可以大可以小的

同样是 900 个点，如果每个点 1 毫米，那就是 90 厘米，如果每个点 1 厘米，那就是 9 米

对于一台具体的显示器，那么多个点排列起来之后，构成的一个整体的宽度和高度，我们称之为显示器的“物理尺寸 (physical size)”，单位是“宽度x高度”

DPI（点每英寸）

不同的显示器分辨率不一样，物理尺寸也不一样，因此你用一张一英寸长的小纸条按在屏幕上，能被你盖住的像素的个数也是不一样的

我们把一英寸里能包含的像素的个数叫做屏幕的解析度，单位叫 DPI（dots per inch）

PPI（像素每英寸）

每英寸的像素数（PPI，pixel per inch）

屏幕常用 PPI(Pixel per inch) 来判定屏幕清晰度，ppi越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多

转换关系

物理长度转换成像素个数时，根据屏幕的解析度（DPI（点每英寸））计算每英寸对应多少个像素点，然后根据像素点显示物理长度

例如：在屏幕上显示一条 5cm 长的线段

5cm 是物理长度，要想在屏幕上显示，需要先把物理长度换算成像素个数。

5cm 换成英寸是 1.9685 英寸，然后根据屏幕的解析度，每英寸对应 120 个像素，因此 5cm 对应的就是 236 个像素。

所以在这台显示器上画一条 236 个像素的线段，它就正好是 5cm 了

扩展显示识别数据 EDID（extended display identification data）

显示器的制造者通常会运用EDID 技术将物理尺寸信息直接存在显示器里面，计算机可以根据屏幕分辨率和显示器的物理尺寸计算出一个合适的解析度

EDID 技术是新兴技术，以前的显示器并没有这项技术，所以会根据市面上常见的显示器的解析度来，硬性规定一个默认值

在 Windows 下，默认的解析度是 96dpi

2.物理像素 DP(device pixels)

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt

物理像素是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成

所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（2*2）

3.物理像素比（DPR）

这里先叙述一下概念，后面再详细简介

物理像素点是指屏幕显示的最小颗粒，是真实存在的，如手机屏幕分辨率750*1334是指横向有750个像素点纵向有1334个像素点

在开发时使用的px单位称为逻辑像素（CSS像素），逻辑像素与之间存在一个比例关系，默认情况下一个px和一个像素一一对应，是相同的

可以用 javascript 中的window.devicePixelRatio 来获取物理像素比，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取，比例多少与设备相关

在PC端1px等于一个物理像素，但是移动端就不尽相同，移动设备都是高PPI设备，一个px往往可以相当于多个物理像素的尺寸

一个px能显示的物理像素点个数，称为物理像素比或屏幕像素比

4.视口（viewport）

视口就是浏览器显示页面内容的屏幕区域。

视口可以分为布局视口和理想视口还有设备视觉视口

布局视口（layout　viewport）

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS、Android基本都将这个默认设备视觉视口设置为980px，所以PC上的网页大多能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

设备视觉视口（visual　viewport）

视觉视口是指用户可以通过设备看到的网页区域

可以人为的通过缩放设备去操作视觉视口，但不会影响布局，布局视口仍保持原来宽度

理想视口（ideal　viewport）

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口对设备而言，就是最理想的视口尺寸

需要添加，mate标签通知浏览器操作

meta视口标签主要目的：布局视口应该和理想视口宽度一致，简单理解就是，设备有多宽，布局视口就多宽

5.meat标签

width属性设置的是视口宽度，可以设置为device－width（设备视口宽度）

user-scalable设置是否可以缩放（不可以的话用户无法放大界面）

initial-scale初始缩放比，初始的时候对布局视口进行缩放的比例

二、物理像素＆物理像素比

1.概念

物理像素点是指屏幕显示的最小颗粒，是真实存在的，如手机屏幕分辨率750*1334是指横向有750个像素点纵向有1334个像素点

在开发时使用的px单位称为逻辑像素（CSS像素），逻辑像素与之间存在一个比例关系，默认情况下一个px和一个像素一一对应，是相同的

可以用 javascript 中的 window.devicePixelRatio 来获取物理像素比，也可以用媒体查询的-webkit-min-device-pixel-ratio 来获取，比例多少与设备相关

在pc端1px等于一个物理像素，但是移动端就不尽相同

一个px能显示的物理像素点个数，称为物理像素比或屏幕像素比

2.物理像素比产生原因

PC端和手机屏幕在早期1CSS像素＝1物理像素

retina（视网膜技术）是一种显示技术，可以把更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度（就是将1像素的范围里放置更多的物理像素点，使用更多的物理像素点表示1px）

扩展显示识别数据 EDID（extended display identification data）

显示器的制造者通常会运用EDID 技术将物理尺寸信息直接存在显示器里面，计算机可以根据屏幕分辨率和显示器的物理尺寸计算出一个合适的解析度

EDID 技术是新兴技术，以前的显示器并没有这项技术，所以会根据市面上常见的显示器的解析度来，硬性规定一个默认值(在 Windows 下，默认的解析度是 96dpi)

由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致，因此，CSS像素为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，一般来说，每英寸的像素的数量保持在 96 左右

三、图片模糊问题

由于物理像素比的原因，对于色彩丰富的图片，在手机端打开，按照屏幕像素比发达倍数，会造成图片模糊

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元，每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。

而对于dpr=2的Retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊，如下图

四、多倍图

在标准viewport设置中，使用多倍图提高图片质量，解决高清设备中的模糊问题

如果pc端需要一个5050的图片，通常准备像素为100100的图片，再手动将图片缩小到50*50，实际准备的图片是实际需要的两倍，这就是两倍图

原理

一个200×300(CSS pixel)的img标签，对于dpr=2的屏幕，用400×600的图片，如此一来，位图像素点个数就是原来的4倍，在Retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了

通常使用的都为二倍图，但也存在更高的物理像素比所以也有三倍图、四倍图的情况

普通屏幕下使用多倍图

普通屏幕下，200×300(CSS pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数是200×300×4个，所以就出现一个物理像素点对应4个位图像素点

但它的取色也只能通过一定的算法取某一个位图像素点上的色值，这个过程叫做缩减像素采样(downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差，如下图

所以最好的解决办法是：不同的dpr下，加载不同的尺寸的图片。不管是通过CSS媒体查询，还是通过JS条件判断都是可以的

五、移动端1px边框问题

产生原因

移动端由于高像素密度，设置CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px，而设计师想要的1px宽的直线，其实是指1物理像素宽

所以对于二倍屏应该设置border: 0.5px，然而，并不是所有手机浏览器都能识别小数，不同浏览器有不同的处理方式

有的只渲染出零点几px对应的物理像素，有的干脆都显示1px，甚至还有0.5px会被当成为0px处理

同样的rem值，在不同dpr（物理像素比）的设备上宽度不同，最常见的就是边框，有的设备上显得特宽，特别扭，也就是经典的1px边框问题

解决方法

1.使用border-image实现

根据需求选择图片，然后根据css的border-image属性设置边框图片

语法：

// 用在边框的图片的路径
border-image: none | <image>
// 图片边框内偏移
bordre-image-slice [<number> | <percentage>]{1,4} && fill?
// 图片边框的宽度
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
// 边框图像区域超出边框的量（向外位移）
border-image-outset:[<number> | <percentage>]{1,4}
// 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image-repeat：repeated|rounded|stretched

2.使用background-image实现

linear-gradient：指定线性渐变，接受大于等于3个参数，第一个为渐变旋转角度，第二个开始为渐变的颜色和到哪个位置（百分比）全部变为该颜色

将原本1个物理像素的边框大小利用线性渐变分割成几个部分（百分比控制），实现小于1像素效果

例如：

该例子中，第一句就是，渐变方向旋转180度，即从上往下（默认为0度从下往上），从红色开始渐变，到50%的位置还是红色，再渐变为继承父元素颜色。

缺点：因为每个边框都是线性渐变颜色实现，因此无法实现圆角

3.使用box-shadow模拟边框

优点：没有圆角问题
缺点：边框有阴影，颜色变浅

4.伪元素+transform

针对二倍屏构建1个伪元素， border为1px, 再以transform缩放到50%：scaleY(0.5)

5.媒体查询利用设备像素比缩放，设置小数像素

IOS8+下已经支持带小数的px值，media query 对应 物理像素比（devicePixelRatio） 有个查询值 -webkit-min-device-pixel-ratio；

6.用JS计算rem基准值和viewport缩放值

用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和meta标签的initial-scale缩放值属性

【CSS】物理像素 DP(device pixels)、物理像素比（DPR）、px 逻辑像素（CSS像素）、DPI、PPI 的概念解析 以及1px问题解决方法相关推荐

1. 图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi

   目录 物理分辨率和分辨率 什么是物理像素 什么是CSS像素 什么是设备像素比 什么是标清屏和高清屏 缩放 什么是PPI(DPI) 物理分辨率和分辨率 首先得知道物理分辨率和分辨率是2个概念,可别混淆. ...

2. 图片尺寸像素点,图片的大小,分辨率,a4纸,dpi,ppi,pt,pixel像素,屏幕尺寸

   catalog 图片大小 a4纸 DPI,PPI Pt,Px 图片大小 对于RGB模式, 一个像素点, 由 (R, G, B) 三个 颜色通道 组成; 且, 每个通道, 都占 1个字节; color: ...

3. Android 屏幕尺寸、屏幕分辨率(px)、屏幕像素密度(dpi)、密度无关像素(dp/dip)、屏幕适配

   1. dp , dpi , px 关系 (假设已经熟悉了基本概念,也可以参考最后的链接)  2. 运行时dp 如何转换成 px  3.  使用dp 和 px 设计结果比较 参考: Android屏幕适 ...

4. 使用fdisk创建好了分区，但是在生成物理卷出现“Device /dev/sdb2 not found (or ignored by filtering).“解决方法

   使用fdisk创建好了分区,但是在生成物理卷出现"Device /dev/sdb2 not found (or ignored by filtering)."解决方法 参考文章: ...

5. 高清屏概念解析与检测设备像素比的方法

   前言 做移动端h5开发很久了,从开始入行到现在.很多知识和工具都是在用前辈留下的遗产,都没有深入的研究过原因,了解为什么要这么去做. 也许自己也是过了交给自己做什么就做什么的阶段了.在国庆节有一个大块 ...

6. 【Android 屏幕适配】屏幕适配基础概念 ② ( 像素 px 与 密度无关像素 dip | 像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 )

   文章目录 一.像素 px 与 密度无关像素 dip 二.像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 ...

7. android都图片mat_计算机视觉 OpenCV Android | Mat像素操作（图像像素的读写、均值方差、算术、逻辑等运算、权重叠加、归一化等操作）...

   本文目录 1. 像素读写 2. 图像通道与均值方差计算 3. 算术操作与调整图像的亮度和对比度 4. 基于权重的图像叠加 5. Mat的其他各种像素操作 1. 像素读写 Mat作为图像容器,其数据部分 ...

8. linux怎么初始化物理设备,LINUX pvcreate命令-将物理硬盘分区初始化为物理卷

   将物理硬盘分区初始化为物理卷 补充说明 pvcreate命令 用于将物理硬盘分区初始化为物理卷,以便LVM使用. 语法 pvcreate(选项)(参数) 选项 -f:强制创建物理卷,不需要用户确认: ...

9. 物理机linux无法上网,物理机不能访问虚拟机VMNet8中的Linux

   将虚拟机部署到NAT网络指定上网使用的物理网卡 配置Linux虚拟机通过NAT访问Internet 虚拟机NAT不能上网 物理机不能访问虚拟机VMNet8中的Linux 修改虚拟机的MAC地址 安装完 ...

最新文章

1. 飞桨第四节七日cv经典网络 2020.4.3
2. bat中文乱码_详解Windows下获取时间bat脚本总结，值得收藏
3. 5.1 vim介绍 5.2 vim颜色显示和移动光标 5.3 vim一般模式下移动光标 5.4 vim一般模式下复制、剪切和粘贴...
4. Mahout-Pearson correlation的实现
5. jquery的ajax异步请求接收返回json数据
6. 打开服务的方法，cmd上直接输入：services.msc
7. android service 的各种用法（IPC、AIDL）
8. 如何让循环里面语句执行完之后再去循环第二次_Go循环语句的使用
9. 小米 samba linux,解决小米路由器升级固件后samba无法访问一例
10. 有限元法分析工程实际问题的一般过程
11. ORACLE有EXCEL中trend函数,借助Excel TREND 函数来解决线性插值的计算
12. python单位根检验看结果_求助！！！关于单位根检验！！！！我检验了，但看不懂结果，哪位高手帮帮忙...
13. UVA 1359 POJ 3522 Slim Span（最小生成树kruskal）
14. 用户管理的备份恢复（2）
15. [Android]DDMS查看app保存的Sqlite数据库db文件和db升级
16. Personal Information
17. docker daemon.json肯多多
18. 【Clemetine】数据挖掘在零售业中的应用
19. 新IT：催生教育新世界
20. 反思加班文化：胡新宇,不该消失的生命_网易商业报道_中国经理人门户网站

热门文章

1. 用于野外精确人体姿态估计的自适应多视图融合
2. SQL注入之联合查询
3. Python学习（十七）—— 数据库（二）
4. 普通程序员如何实现财富自由，迎娶白富美，走上人生巅峰！
5. 【论文笔记】GCA-Net : Utilizing Gated Context Attention for Improving Image Forgery Localization and Detec
6. 【Educoder作业】※ 字符信息——凯撒加密
7. 阿里云的oss删除低频访问的文件处理方式
8. C++ web框架drogon 使用对象关系映射ORM（Object Relational Mapping）模式
9. mysql查询高于平均_Mysql之高级查询
10. 【已解决】小米手机5解BL锁时出现错误码20091怎么办？| 小米手机5怎么解Bootloader锁 | 小米5获取ROOT权限 | 小米手机5卡槽坏了无法正常读取手机卡怎么解锁BL