1、物理分辨率
物理分辨率也叫标准分辨率，是指LED显示屏显示的图像原始分辨率，也叫真实分辨率。和物理分辨率对应的是压缩分辨率，决定图像清晰程度的是物理分辨率，决定显示屏的适用范围的是压缩分辨率。
物理分辨率即LED液晶板的实际分辨率，在LED液晶板上通过网格来划分液晶体，一个液晶体为一个像素点。那么，输出分辨率为1024×768 时，就是指在LED液晶板的横向上划分了1024个像素点，竖向上划分了768个像素点。
物理分辨率越高，则可接收分辨率的范围越大，则显示屏的适应范围越广。通常用物理分辨率来评价LED显示屏的档次。
物理分辨率：显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。
2、逻辑分辨率
逻辑分辨率是显示屏分辨率。
两者间由 Scale Factor（缩放因子） 计算得到，通常 物理分辨率 >逻辑分辨率，而 物理分辨率 * 缩放因子 = 逻辑分辨率；但在使用 台式电脑、和 笔记本 的情况下 物理分辨率 = 逻辑分辨率。
扩展资料：
1、物理分辨率：是硬件所支持的。
=设备像素（是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。）
=物理尺寸（屏幕的实际大小。）
2、逻辑分辨率：软件可以达到的。
=逻辑尺寸（CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。）
=css像素（比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。）
正确理解 物理分辨率和逻辑分辨率：
以ios的为例，
640*960、640*1136等这些都是物理尺寸或是物理分辨率。
而下面的320*480、320*568等这些都是逻辑分辨率或是逻辑尺寸。
从另外的角度来说：分辨率就是屏幕上横、纵的总象素点数。
如果我们设计的时候用单位px，可以说是物理分辨率尺寸。
如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸。
物理像素[设备像素] &逻辑像素[CSS 像素]
拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。
在浏览器中无法设置小于 1px 的边框 设置了也不会生效
设计师要求的 1px 是指设备的物理像素 1px，而 CSS 里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用 javascript 中的 window.devicePixelRatio 来获取。当然，比例多少与设备相关。
移动端开发常需要在 html 的 header 里添加如下一句：
设备像素比 = 物理像素 / css 像素
核心思想就是设置 1px 大小 然后将 1px 缩小为 0.5px 来展示
IOS8 下已经支持带小数的 px 值, media query 对应 devicePixelRatio 有个查询值-webkit-min-device-pixel-ratio, css 可以写成这样
【缺点】对设备有要求，小数像素目前兼容性较差。
pixel-border.css 这个工具库就是用来解决移动端 1px 边框的问题，用到的思想和我下面写的一致
pixel-border.css
该方案是对上述方案的优化，整体思路就是利用 viewport + rem + js 动态的修改页面的缩放比例，实现小于 1 像素的显示。在页面初始化时，在头部引入原始默认状态如下：
接下来的任务就是 js 的动态修改缩放比 以及 实现 rem 根元素字体大小的设置。
【缺点】以为缩放涉及全局的 rem 单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。
可能你会问为什么在3倍屏下，不是0.3333px 这样的？经过我测试，在Chrome上模拟iPhone 8Plus，发现小于0.46px的时候是显示不出来。
