CSS to achieve within 1px of mobile

Maybe you've seen a pixel border problem with the Retina screen, and note that this is a border width rather than a moving element.

What the? Border less than 1px?

Yes, because someone in front of the relevant program and a good variety of solutions, here do not repeat the principle of implementation, to give you two links, interested in their own jump.

How does a Retina-screen mobile device achieve a true 1px line?
Mobile Web dot 5 pixel secret
Read Taichetaiwu, admire admiration, a lot of ideas, back to the focus of this article

Think of a way to move it position (top,right,bottom,left), margin, padding, vertical-align.

Only part of it gives you a way to move through specific units (px, EM, REM, etc.)

In accordance with the principle of practice, the above scheme is not feasible, in the latest chrome, when less than 0.5px is 0, when greater than or equal to 0.5px will become 1px.

Because the case is too simple, do not do demo, interested in their own practice, I believe that most people have tried.

So what are the attributes that move in a specific unit?

Solution

Maybe you already know the translate attribute of transform. Yes, it can move within 1px!

Basic syntax:

Transform:translate (12px, 50%);
Transform:translatex (2EM);
Transform:translatey (3in);
Give the demo code of this article,

<div class= "Parent" >
<div class= "Child-first" ></div>
<div class= "Child-second" ></div>
<div class= "Child-third" ></div>
</div>

<style>
. Parent {
width:310px;
height:150px;
Background-color: #666;
}

. Parent Div {
Display:inline-block;
}

. child-first {
width:100px;
height:100px;

Margin-top:. 5px;

Transform:translatey (. 3px);

Background-color: #f66;
}

. child-second {
width:100px;
height:100px;

Transform:translatey (. 5px);

Background-color: #ff0;
}

. child-third {
width:100px;
height:100px;

Transform:translatey (1px);

Background-color: #06c;
}
</style>

Screenshot below

Here to make it easier to observe, we replace the layout with Inline-block, we find that there is a gap between elements and elements go back to see the code found no problem, then this distance is how to cause?

Is it a space? That's right! When using Inline-block, be sure to pay attention to the unnecessary hassle of code indentation or line wrapping (accidentally adding spaces).

Modified as follows

<div class= "Parent" >
<div class= "Child-first" ></div><div class= "Child-second" ></div><div class= "Child-third" "></div>
</div>
Get the final result, as shown below

Here specifically to make a distinction between small pieces of color, browser view to maximize the number of times, if you still do not see the words, recommended that everyone try their own hands,

Summarize

Here my method is finished, in the end Welcome to discuss, more than one, Orange currently only found this scheme, you can also according to JS Judge Screen and then give. 5 pixel offset is also possible, I personally think this method is simple.