该postcss插件处理1pxborder问题。
该插件将检查border属性，如果包含1px或1PX设置，将添加DPR 媒体查询和0.5PX的border设置，使retina显示更细的border。
该方式无法兼容android、 ios8以下设备。如果安卓机的DPR大于2，将会不显示border
.border{
display: block;
width: 100px;
height: 100px;
border: 1px solid #333;
}转换为：
.border {
display: block;
width: 100px;
height: 100px;
border: 1px solid #333;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi)
{
.border {
border: 0.5PX solid #333;
}
}.border {
border: 1px solid #333;
border-bottom: 0;
border-left-width: 2px;
}转换为：
.border {
border: 1px solid #333;
border-bottom: 0;
border-left-width: 2px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi)
{
.border {
border: 0.5PX solid #333;
border-bottom: 0;
border-left-width: 2px;
}
}npm i --save-dev postcss-retina-border
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent