掃二維碼與項目經理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網交流
之前的文章說過關于行內元素垂直方向對齊的方案。感興趣的可以看我的往期文章。在上一篇文章里我們提到了 1px 內的移動問題。本文就一像素內的問題給出解決方案。
公司主營業(yè)務：成都網站建設、網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出樺川免費做網站回饋大家。
可能大家看過關于 Retina 屏幕的一像素邊框問題，注意這里是邊框寬度而不是移動元素。
什么?border 小于 1px ?
對，因為前面有人給出相關方案而且好多種方案，這里不重復描述實現(xiàn)原理，給大家兩個鏈接，感興趣的自己跳轉。
看完大徹大悟，佩服佩服，思路很多，回到本文重點
想一下能實現(xiàn)移動的方法 position(top,right,bottom,left), margin, padding, vertical-align。
上面給的只是一部分可以通過具體單位(px, em, rem 等)進行移動的方法
本著實踐的原則，上述方案都不可行，在***的 chrome 中，當小于 0.5px 時是 0，當大于等于 0.5px 時就變成 1px。
因為案例過于簡單，不做 demo ，感興趣的自己實踐，相信大家多數(shù)人試驗過了。
那么還有什么以具體單位移動的屬性呢?
解決方案
也許你早就知道有 transform 的 translate 屬性了。沒錯它就能實現(xiàn) 1px 內的移動!
基本語法：
- transform: translate(12px, 50%);
- transform: translateX(2em);
- transform: translateY(3in);
給出本文的 demo 代碼，