移动端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 width: 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: " ";
width: 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
自我感觉这种方法比较麻烦，还要处理图片，听不实用的，用的话可以参考
