lovekonakona/postcss-retina-border

Generate border width in your retina phone

postcss-retina-border

该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 {
    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

使用

参考