移动端1px的解决办法之styled

做项目的时候总结了一个styled中解决移动端项目1px像素线的问题，封装了一个函数，大家可以直接使用，很方便。

 1 import styled from 'styled-components'

 const border = ({
     component=null,
     width='1px',
     style='solid',
     color='#ccc',
     radius=0
 }) => {
   return styled(component) `
     position: relative;
     border-width: ${ width };
     border-radius: ${ radius + 'px' };
     &::after {
       pointer-events: none;
       position: absolute;
       z-index: 999;
       top: 0;
       left: 0;
       content: "";
       border-color: ${ color };
       border-style: ${ style };
       border-width: ${ width };

       @media
         (max--moz-device-pixel-ratio: 1.49),
         (-webkit-max-device-pixel-ratio: 1.49),
         (max-device-pixel-ratio: 1.49),
         (max-resolution: 143dpi),
         (max-resolution: 1.49dppx) {
           width: 100%;
           height: 100%;
           border-radius: ${ radius + 'px' };
         };

       @media
         (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
         (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
         (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
         (min-resolution: 144dpi) and (max-resolution: 239dpi),
         (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
           width: 200%;
           height: 200%;
           transform: scale(.5);
           border-radius: ${ radius * 2 + 'px'};
         };

       @media
         (min--moz-device-pixel-ratio: 2.5),
         (-webkit-min-device-pixel-ratio: 2.5),
         (min-device-pixel-ratio: 2.5),
         (min-resolution: 240dpi),
         (min-resolution: 2.5dppx) {
           width: 300%;
           height: 300%;
           transform: scale(.33333);
           border-radius: ${ radius * 3 + 'px' }
         };

         transform-origin: 0 0;
     };
   `
 }

 export default border