1px Cause of the problem
From the perspective of mobile terminal, let’s take iphone6 as an example.
Border-width :1px; border-width:1px; border-width:1px The 1px border issue has been created.
For designers it is 1px relative to 750px (physical pixels), for you it is 1px relative to 375px (CSS pixels) “actually you should be border-width:0.5px”.
The specific plan
Knowing the cause of the problem, it is easy to solve it.
Write borders with decimals
Media query, plus decimal notation
.border { border: 1px solid # 999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5 px. solid # 999}} @media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333 px. solid # 999}}Copy the code
- Advantages: convenient
- Cons: Android doesn’t work with lower versions of IOS, so this may be the future standard
Tranform adds pseudo-class tags
Using pseudo-class tags, more parent positioning, more media query zoom size implementation effect (note that “transform-Origin: left top;” )
<span class="border-1px">1 pixel border problem</span>
Copy the code
// less
.border-1px{
position: relative;
&::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 200%;
border:1px solid red;
color: red;
height: 200%;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.5);
transform: scale(0.5);
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
@media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
width: 300%;
height: 300%;
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
}
}
Copy the code
Note that the input button does not have :before, :after pseudo-elements
- Pros: Not only rounded corners, but other borders can also be made this way
- Disadvantages: Large amount of code, occupying false elements, easy to cause conflicts
box-shadow
Use shadows to simulate borders
.border-1px{
box-shadow: 0px 0px 1px 0px red inset;
}
Copy the code
2 times the screen
Three times the screen
border-image
Creating a 1px border is essentially creating a 0.5px border, so we can take an image like this and make “border-image-slice” 2, so that half of the border is actually transparent and we get the “1px border” we want.
<div class="test">1 pixel border</div>
Copy the code
.test{
border: 1px solid transparent;
border-image: url('./border-1px.png') 2 repeat;
}
Copy the code
- Modify color trouble, need to replace the picture
- Rounded corners require special treatment and the edges can be blurred
background
This method is basically not used (trouble O(∩_∩)0), but take note
.background-image-1px { background: url(.. /img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }Copy the code
conclusion
In view of compatibility and flexibility, I recommend tranform to write with pseudo class labels to save time and cost.
The resources
- Mobile terminal 1px thin line solution summary
- Let’s talk about the 1px solution for Retina
- 7 Ways to fix the 1px border on the Mobile Retina Screen