Sass code of mobile 1px problem

first of all, in my understanding of the 1px frame, the reason for this problem is that in some high-definition screens, one css pixel corresponds to multiple physical pixels, which makes it look thicker when the frame is set to 1px. For example, for two screens of the same size, the HD screen looks thicker than the ordinary screen 1px, but the actual size is the same

I wonder if the above understanding is correct

I don"t know how to solve the 1px border problem by using scale. I don"t know if there is a plug-and-play sass function. Please post the code (other methods are also available)

Sass css3 css

Mar.01,2021

take 1px bottom border as an example
defines a border-bottom-1px mixin, setting a color parameter @ color.

@mixin border-bottom-1px($color){
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}

Zoom border-bottom-1px

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.7);
             transform: scaleY(0.7);
         }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.5);
             transform: scaleY(0.5);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.3);
             transform: scaleY(0.3);
        }
    }
}

how do I use it?
html is as follows:

<div class="border-bottom-1px-test">1px</div>

css is as follows:

.border-bottom-1px-test{
    @include border-1px(rgba(7, 17, 27, 0.1));
}

when writing css, remember to introduce border-bottom-1px this mixin first.

I haven't used sass, and I've hardly done mobile. But for questions about 1px, you can refer to this article

"use border-image to implement 1px bottom edges similar to iOS7" https://github.com/maxzhang/m.

others: https://github.com/RubyLouvre.

Previous: Why is the module of angular still not found when it is introduced globally?

Next: Vue a list of requirements scenario questions

How to deal with url in css when webpack is packaged?
there is a background image in css, which is introduced as follows uses an alias as the path, but it still exists in the form of an alias after packaging and is not converted, but if it is packaged in this format, the image cannot be obtained normal...

Front-end less sass css3 css

Apr.10,2022