移动端1px产生的原因及解决方案

基本概念

• CSS像素(虚拟像素):指的是css样式代码中使用的逻辑像素。
• 设备像素(物理像素):指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。px是一个相对单位，相对的是设备像素。
• 设备独立像素(逻辑像素):是计算机坐标系统中的一个点,这个点代表一个由程序使用的虚拟像素(css像素也是逻辑像素)。

当逻辑像素是1pt时，在DPR为2的设备上显示的为1px的物理像素

注释:缩放因子指的是DPR

产生原因

1. 设备像素比(DPR)：dpr=window.devicePixelRatio＝ 物理像素 / 逻辑像素
2. 当dpr为2或3，css里的1px宽度映射到物理像素上为2px或3px

解决方案

1. 直接设置0.5px

ios8+可以识别浮点类型的单位，因此可以渲染这个0.5px。然而，绝大部分的android机是不支持浮点类型单位的。所以这种方案pass…

2.viewport+rem实现

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了
在dpr=2时，输出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在dpr=3时，输出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

注释:这种兼容方案想对比比较完美，适合新的项目，老的项目修改成本过大

3.多背景渐变实现

.background-gradient-1px {
  background:
    linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat}/* 或者 */.background-gradient-1px{
  background:
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat}

这种方案比较不错，不仅实现了1px的边框，还能实现多条边框。缺点是不能实现圆角1px边框，浏览器的兼容性需要考虑

4.伪类+transform实现

原理: 利用:before或者:after实现border,并将transform的scale缩小一半，将border绝对定位

单条border样式设置

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

4条border的实现

.scale-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

注释: 最好在使用前判断下，判断是否retina屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale-1px';
}