Please remember, every responsible designer is a Virgo...
Here... there is no negative meaning towards Virgos, just wanted to take advantage of the topic and sincerely bow down to the mighty "pixel eye".
一、You are my eyes#
What is a pixel eye?
It refers to those magical beings who take a glance at you and say, "I noticed that your left eyebrow is 1 pixel higher than your right eyebrow, could you please adjust it..."
At Tencent, many of my design colleagues have this kind of eye. They pay attention to every detail and because of frequent revisions, they can make your development work a mess. But you have to admit, they are right.
Recently, while doing mobile web development, following the design, Toby has been checking and revising next to me for over two hours. When I thought everything was fine, Toby told me that it still didn't seem right - the border seems a bit thick?
At that moment, I was dumbfounded because it was already the thinnest border, clearly displayed on the computer, and I had already set it to 1px border. So I explained and suggested changing the color value to make the border at least "appear" thinner. But Toby didn't accept it, according to him, the border didn't look sexy...
It turns out that the world's aesthetics are based on thinness, from women to a single line? So, in order to find a sexy border, after collecting a bunch of information, I actually found a solution:
- Parent element setting: scale(0.5,0.5)
- Child element setting: scale(2,2) to restore the scaling, origin is based on the top left corner (0,0) / left top
This way, the border of the parent element is actually scaled down, undoubtedly making it thinner.
二、Universal solution#
Use a CSS class to add a thinner border to block elements
.border-1px{
position: relative;
&:before, &:after{
border-top: 1px solid #c8c7cc;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
}
&:before{
top: 0;
}
&:after{
bottom: 0;
}
}
Adapt to mobile devices:
@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio: 1.5){
.border-1px{
&::after, &::before{
-webkit-transform: scaleY(.7);
-webkit-transform-origin: 0 0;
transform: scaleY(.7);
}
&::after{
-webkit-transform-origin: left bottom;
}
}
}
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2){
.border-1px{
&::after, &::before{
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
}
}