本文目录：
- 1.物理像素
- 2.逻辑像素
- 3.设备像素比
- 4.1px边框在移动端的解决方案
1.物理像素
物理像素也叫设备像素，是设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。
2.逻辑像素
逻辑像素也叫CSS像素，同时也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
3.设备像素比
Device Pixel Ratio, DPR，一个设备的物理像素与逻辑像素之比。
在PC端，物理像素和逻辑像素没区别，CSS里写个1px，屏幕就给你渲染成1个实际的像素点，DPR=1。
但是随着Retina技术的兴起，使用4个乃至更多物理像素来渲染1个逻辑像素，这样一来，同样的CSS代码设置的尺寸，在Retina和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多。
在Retian屏上，DPR不再是1，而是大于1，比如2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者为非整数（一些Android机），说不定还会涨。
4.1px边框在移动端的解决方案
暂不推荐的方法：
- 设置0.5px边框（兼容性差）
- 设置 border-image 方案（兼容性差）
- viewport动态修改缩放比例（开发成本高）
推荐方案：媒体查询 + transfrom方案
原理：元素本身不定义边框，伪元素定义1px边框，并且根据根据像素比值设置缩放比例，像素比为3时设置为0.33，像素比为2时设置0.5。
/* 2倍屏 */
.border{
position: relative;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border::after {
content: '';
position: absolute;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border::after {
content: '';
position: absolute;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
上述代码的使用方法：
1.将上面的代码拷贝进项目的样式文件中
2.给准备添加边框的元素增加上border样式
注意：上面的样式代码默认添加的是上边框，如果要添加下边框的话，请添加上bottom: 0;样式，如果是添加左边框右边框的话，则需要把width:100%;修改为height:100%，transfrom也要从scaleY变成scaleX
