移动端1px问题

导致原因

在没有写移动端项目之前，1px = 1px在pc端是一直通用的，如果要加一条1px宽的细线，直接写border: 1px solid #ccc;这样就是可以的；但是后来接触到移动端项目，才知道直接写1px的线，放在移动端显示的时候是比1px宽的，但这是为什么呢？明明写了1px的细线，在部分手机上就会显示2px、3px的宽度呢？

原因就是移动端的分辨率往往跟设备的物理像素不匹配，例如iphone6s的分辨率是750*1334，手机已375px的像素显示，那么在页面中1px的像素就会显示为2px，因为750/375*1px=2px;所以在移动端的显示效果就会是看到两个像素的宽度，如果要正常的显示1px的细线，则需要设置border: 0.5px solid #ccc;这样0.5px的像素在移动端显示就是1px。

对于iphone还好，尺寸比例就那几个固定的值，直接设置为0.5px就好，但是对于android设备来说就没有那么容易简单了，安卓设备厂家众多，屏幕及分辨率的尺寸各不相同，所以就需要一个可以一劳永逸的方法来解决1px这种问题，下面列出几种主流的解决方法。

解决方法

 1、使用小数

如上面提到的，可以使用小数来表示宽度，在移动端，移动端window对象有个devicePixelRatio属性, 用它来表示设备物理像素和css像素的比例，比如上面提到的比例为2，iphone上的比例一般为2或者3

这时可以使用媒体查询来解决这个问题

1 @media screen and (-webkit-min-device-pixel-ratio: 2) {
2     .border { border: 0.5px solid #ccc }
3 }
4 @media screen and (-webkit-min-device-pixel-ratio: 3) {
5     .border { border: 0.333333px solid #ccc }
6 }

但是这种方法android不适用

2、使用transform:scaleY

同样可以根据devicePixelRatio来对1px进行伸缩，当devicePixelRatio=2是伸缩0.5，当devicePixelRatio=3时伸缩0.33333，大部分条件下，0.5就已经够用了，差别不是特别大，事实上许多1px也是只做到了scaleY(0.5);

1 .line{
2      100%;
3     height: 1px;
4     background-color: black;
5     margin-top: 100px;
6     transform: scaleY(0.33333);
7     transform-origin: 0 0;
8 }

3、使用background渐变

背景渐变, 渐变在透明色和边框色中间分割

1 @media screen and (-webkit-min-device-pixel-ratio: 2){
2     .ui-border-t {
3         background-position: left top;
4         background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
5     }
6 }

4、使用伪元素

div:after {
  content: " ";
   100%;
  height: 200px;
  border-radius: 4px;
  border: 1px solid #000;
  transform: scale(0.5, 0.5);
  transform-origin: 0 0;
  position: absolute;
}

这种方式可以设置圆角，同样可以设置1边border

5、使用border-image

自我感觉这种方法比较麻烦，还要处理图片，听不实用的，用的话可以参考

使用border-image实现类似iOS7的1px底边