End mobile solutions to problems 1px

Cause

在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于
几个物理像素是和屏幕像素密度有关的。由于不同的手机有不同的像素密度，如
果移动显示屏的分辨率始终是普通屏幕的2倍，那1px 的边框在 设备像像素比(dpr)为 2 
的移动屏下会显示成 2px，所以在高清屏下看着1px总是感觉更粗

This involves several concepts:

1. Physical pixel: pixel is also known as a physical device, the minimum physical unit on the display (pixel particles)
2. Device independent pixel: pixel is also referred to as CSS, this point represents a dummy pixel can be used by the program, may also be said logical pixel, and then converted by the pixel-related physical systems
3. (Dpr) = the physical pixel / pixels independent device than the device pixel (px)

Solution

1. When the ratio of the pixel of the device 2, 0.5px

   优点：简单
   缺点：但是并不是所有手机浏览器都能识别到 border: 0.5px
   

2. + Class pseudo transform implemented: the original border element removed, then: before or: after redo border, and using the scale property transform reduced to half the original element relative positioning, new border do absolute positioning

   优点: 所有场景都能满足，支持圆角
   缺点: 对于已经使用伪类的元素，可能需要多层嵌套
   

   .element {
   	position: relative;
   	border: none;
   }
   // 下边框
   .element:after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       background: steelblue;
       transform: scaleY(.5);
   }
   

3. viewport + rem achieve

   优点: 这种兼容方案相比比较完美，所有场景都能满足，一套代码，可以兼容基本所有布局
   缺点: 适合新的项目，老的项目修改成本过大
   

   function resetRemUnit(){
   
     // 获得设备像素比
     var radio = window.devicePixelRatio;
     // 处理设备像素比，只能是1，2，3
     radio = radio >= 3 ? 3 : (radio >= 2 ? 2 : 1);
     // 判断是否有meta标签
     var viewportDOM = document.querySelector('meta[name=viewport]');
     if(!viewportDOM){
       viewportDOM = document.createElement('meta');
       viewportDOM.setAttribute('name', 'viewport');
     }
     // 计算页面缩放比例
     var scale = 1 / radio; 
     var content = 'width=device-width, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no';
     viewportDOM.setAttribute('content', content);
     // 添加meta标签
     document.head.appendChild(viewportDOM);
   
     // 控制计算rem的最大最小适配页面
     var min = 320 * radio;
     var max = 540 * radio;
     var width = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
     if(width < min){
       width = min;
     }else if(width > max){
       width = max;
     }
     // 计算rem
     document.documentElement.style.fontSize = (width * 100 / 640) + 'px';
   }
   
   resetRemUnit();
   window.onresize = resetRemUnit;
   

4. Simulation using box-shadow border

    利用 css 对阴影处理的方式实现0.5px 的效果
    优点: 代码量少，可以满足所有场景
    缺点: 边框有阴影，颜色变浅
   

   .element {
   	box-shadow: inset 0px -1px 1px -1px steelblue;
   }
   

5. Media Inquiries + transform realization

   /* 2倍屏 */
   @media only screen and (-webkit-min-device-pixel-ratio: 2) {
       .border-bottom::after {
           -webkit-transform: scaleY(0.5);
           transform: scaleY(0.5);
       }
   }