移动端像素概念及1px边框解决方案

本文目录：

• 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