基本概念
设备像素
英文Device Pixels，缩写为DP，有时候也叫『物理像素』。
设备像素是我们描述电子产品等实物的一个单位；比如我们说相机3000W像素，手机1亿像素，电视机4K。
在我们形容电子设备屏幕分辨率1920*1080时，说的像素也是设备像素，不过通常说的是最大像素。
设备独立像素
英文Device Independent Pixels，缩写为DIPs，有时候也叫『逻辑像素』。
CSS、JavaScript、PS当中我们常说像素。比如说字体大小，图片宽高时的像素，就是设备独立像素。
在浏览器中，可以通过screen.width得到设备独立像素
设备像素比
英文Device Pixels Ratio，缩写为DPR；表示一个设备的物理像素与设备独立像素之比。
可以通过 window.devicePixelRatio得到当前设备的设备像素与CSS设备独立像素之比。
PPI
英文Pixels Per Inch，缩写PPI；表示每英寸所拥有的像素数量，有时候也叫『像素密度』。
当我们描述手机、IPad，电脑显示器等电子设备屏幕尺寸大小的时，我们通常会说5.5英寸，27英寸，40英寸。
相同尺寸大小的屏幕，不同的分辨率下，PPI『像素密度』是不一样的。
PPI的计算公式是：
同样是4.3英寸的屏幕，A的分辨率是480 800，B的分辨率是720 1280。
A屏幕的像素密度『PPI』是210；
B屏幕的像素密度『PPI』是340；
相同屏幕尺寸，PPI值越大画面的细节就会越丰富，直观来讲就是PPI值越大，画面越清晰。
视网膜显示屏
是一种由苹果公司设计和委托制造的显示屏，具备足够高像素密度，而使得人体肉眼无法分辨其中单独像素点的液晶屏幕。
简单理解就是相同屏幕尺寸的显示屏，视网膜显示屏PPI值更大了。
为什么会有1PX的问题
在Retian屏上，DPR不再是1，而是大于1，比如2、3或者非整数。IPhone 6的设备像素『物理像素』是750 1334，它的设备独立像素『逻辑像数』是375 667，根据公司计算出DRP = 2。
你想画个1PX的下边框，手机屏幕实际上给分配了2个设备像素『物理像素』。
1PX边框问题实现方案
border-image 图片
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("data:image/png;base64,xxx") 2 0 stretch;
}background-image 渐变
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}viewport + rem + js 实现
1像素问题
下面的底边宽度是虚拟1像素的
上面的边框宽度是虚拟1像素的
box-shadow实现
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}transform:scale(0.5)实现
方法1
用height:1px的div，然后根据媒体查询设置transform: scaleY(0.5);
div {
height: 1px;
bakcground: #000；
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
overflow: hidden;
}方法2
用::after和::before伪类，设置border-bottom: 1px solid #000，然后再缩放-webkit-transform: scaleY(0.5)；可以实现两根边线的需求
div::after {
content: '';
width: 100%;
border-bottom: 1px solid #000;
transform: scaleY(0.5);
}方法3
用::after设置border:1px solid #000;width:200%;height: 200%;，然后再缩放scale(0.5);
.div::after {
content: '';
width： 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border： 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-transform-origin: 0 0;
}参考
移动H5开发中1像素边框问题
掌握web开发基础系列
视网膜显示屏
移动端web页面知识小结之像素、物理像素、逻辑像素
Mobile physical pixels and device independent pixels
CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系
设备像素比
移动端高清、多屏适配方案
iPhone 6 屏幕揭秘
移动端1像素边框问题的解决方案