CSS 實現 1px 以內的移動

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

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

什嗎？border 小於 1px ？

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

Retina 屏的行動裝置如何?真正 1px 的線？

移動 web 點 5 像素的秘密

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

想一下能實現移動的方法 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 代碼，

如下

這裡為了更容易觀察，我們把布局換成 inline-block ，我們發現元素與元素之間存在空隙回去再看一遍代碼發現沒什麼問題，那這段距離是怎麼引起的呢？

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

修改如下

得到最終結果，如

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

總結

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

