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)

.
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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31222-2b2b8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31222-2b2b8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?