做项目的时候总结了一个styled中解决移动端项目1px像素线的问题，封装了一个函数，大家可以直接使用，很方便。
1 import styled from 'styled-components'
2
3 const border = ({
4 component=null,
5 width='1px',
6 style='solid',
7 color='#ccc',
8 radius=0
9 }) => {
10 return styled(component) `
11 position: relative;
12 border-width: ${ width };
13 border-radius: ${ radius + 'px' };
14 &::after {
15 pointer-events: none;
16 position: absolute;
17 z-index: 999;
18 top: 0;
19 left: 0;
20 content: "";
21 border-color: ${ color };
22 border-style: ${ style };
23 border-width: ${ width };
24
25 @media
26 (max--moz-device-pixel-ratio: 1.49),
27 (-webkit-max-device-pixel-ratio: 1.49),
28 (max-device-pixel-ratio: 1.49),
29 (max-resolution: 143dpi),
30 (max-resolution: 1.49dppx) {
31 width: 100%;
32 height: 100%;
33 border-radius: ${ radius + 'px' };
34 };
35
36 @media
37 (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
38 (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
39 (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
40 (min-resolution: 144dpi) and (max-resolution: 239dpi),
41 (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
42 width: 200%;
43 height: 200%;
44 transform: scale(.5);
45 border-radius: ${ radius * 2 + 'px'};
46 };
47
48 @media
49 (min--moz-device-pixel-ratio: 2.5),
50 (-webkit-min-device-pixel-ratio: 2.5),
51 (min-device-pixel-ratio: 2.5),
52 (min-resolution: 240dpi),
53 (min-resolution: 2.5dppx) {
54 width: 300%;
55 height: 300%;
56 transform: scale(.33333);
57 border-radius: ${ radius * 3 + 'px' }
58 };
59
60 transform-origin: 0 0;
61 };
62 `
63 }
64
65 export default border
