CSS 實現 1px 以內的移動

之前的文章說過關於行內元素垂直方向對齊的方案。有興趣的可以看我的往期文章。在上一篇文章裡我們提到了 1px 內的移動問題。本文就一像素內的問題給出解決方案。

可能大家看過關於 Retina 螢幕的一像素邊框問題，注意這裡是邊框寬度而不是移動元素。

什麼？ border 小於 1px ？

對，因為前面有人給出相關方案而且好多種方案，這裡不重複描述實現原理，給大家兩個鏈接，感興趣的自己跳轉。

Retina 螢幕的行動裝置如何實現真正 1px 的線？

行動web 點5 像素的秘密

看完大徹大悟，佩服佩服，思路很多，回到本文重點

想看完能實現移動的方法 position(top,right,bottom,left), margin, padding, position(top,right,bottom,left), margin, padding, position(top,right,bottom,left), margin, padding, vertical -align。

上面給的只是一部分可以透過具體單位(px, em, rem 等)進行移動的方法

本著實踐的原則，上述方案都不可行，在最新的chrome 中，當小於0.5px 時是0 ，當大於等於0.5px 時變成1px。

因為案例過於簡單，不做 demo ，有興趣的自己實踐，相信大家多數人試驗過了。

那麼還有什麼以具體單位移動的屬性呢？

解

也許你早就知道有 transform 的 translate 屬性了。沒錯它就能實現 1px 內的移動！

基本語法：

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);

給出本文的demo 程式碼，

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

截圖如下

這裡為了更容易觀察，我們把佈局換成空隙再看一次程式碼發現沒什麼問題，那這段距離是怎麼造成的呢？

是空格? 沒錯! 在使用 inline-block 的時候一定注意程式碼縮排或換行帶來的不必要的麻煩（無意中添加了空格）。

修改如下

<div class="parent">
  <div class="child-first"></div><div class="child-second"></div><div class="child-third"></div>
</div>

得到最終結果，如下圖

這裡特地將小塊顏色做區分，瀏覽器視圖放大到最大倍數，如果還是看不清的話，推薦大家親手試一試，

總結

到這裡我的方法講完了，在最後歡迎大家討論，方案不止一個， orange 目前只發現這一個方案，你也可以根據js 判斷屏幕然後給出.5 像素的偏移也是可行的，我個人認為此方法簡單一點。