Please remember, every responsible designer is a Virgo...
Here... there is no negative meaning to Virgo, just want to take the opportunity to express and sincerely kneel under the powerful "pixel eye".
###1. You are my eyes
What is a pixel eye?
It is those magical beings who glance at you with the corner of their eye and then say to you: I noticed that your left eyebrow is 1 pixel higher than your right eyebrow, please adjust it...
At Tencent, many of my design colleagues have these kinds of eyes. They pay attention to every detail and because of frequent modifications, they can make you feel miserable about your development. But you have to admit, they are right.
Recently, while doing mobile web development, following the design, Toby has been checking and modifying next to me for more than 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 what he told me: this border doesn'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, the 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.
###2. General 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);
}
}
}