CSS 實現 1px 以內的移動

appetizerio 發布于2019-08-29 11:28 / 1559人閱讀

摘要：之前的文章說過關于行內元素垂直方向對齊的方案。在上一篇文章里我們提到了內的移動問題。屏的移動設備如何實現真正的線移動點像素的秘密看完大徹大悟，佩服佩服，思路很多，回到本文重點想一下能實現移動的方法。

之前的文章說過關于行內元素垂直方向對齊的方案。感興趣的可以看我的往期文章。在上一篇文章里我們提到了 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 像素的偏移也是可行的，我個人認為此方法簡單一些。

文章出自 orange 的個人博客 http://orangexc.xyz/

云服務器 GPU云服務器以內的素數 java 100ms以內的國外主機 JS輕松實現CSS設置 webrtc 移動端實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111665.html

CSS 行內對齊的黑魔法

摘要：魔法完整代碼如下今日瞎選篇以上代碼運行效果和之前一摸一樣這里就不一一截圖費大家流量啦良心前端。。。。對這個屬性不熟悉的朋友可以去看的文檔幾種語法如下我們用的這個長度單位實際應用較少，卻是行內元素垂直對齊的黑魔法。 showImg(https://segmentfault.com/img/bVbhrMS?w=2936&h=1152); 本文和以前的文章類似，orange 盡量帶給大家分享...

enda 2019-08-29 11:25 評論0 收藏0
【零基礎入門】 css學習筆記（2）盒模型

摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性：從內往外： width:內容的寬度，而不是盒子的寬度； hei...

mrcode 2019-08-30 15:53 評論0 收藏0
移動端UI設計規范指南

摘要：基礎概念元素設計規范版式設計規范文字使用規范顏色使用規范輸出規范交互介紹總結在開始設計之前必須搞清楚物理像素邏輯像素倍率三個詞。依然可用設計只是高度增加了，尺寸注意狀態欄的高度由原來的變成了，另外底部要預留的主頁指示器的位置。從事UI設計，一直沒看到完整版的UI設計規范學習資料，特此總結整理方便大家學習交流~ showImg(https://segmentfault.com/img/...

stonezhu 2019-08-30 15:44 評論0 收藏0
HTML+CSS基礎課程-imooc-【更新完畢】

摘要：包含后代選擇器包含選擇器，即加入空格用于選擇指定標簽元素下的后輩元素。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過進行選擇。 6-1 認識CSS樣式 CSS全稱為層疊樣式表 (Cascading Style Sheets)，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可...

Heier 2019-08-01 15:04 評論0 收藏0
【移動適配】一個像素的border怎么實現

摘要：根據上面的圖片，安卓手機，屬于，轉換系數是因此這臺手機中，個像素物理像素。這個轉換系數，也等同于，設備像素比。 showImg(https://segmentfault.com/img/bVtcMA);一個像素里復雜紛擾的世界文 | 啃先生 Mar.3rd.2016 首發于微信公眾號（啃先生）上一篇發了《【移動適配】移動Web怎么做屏幕適配》，現在繼續。壹 | Fisrt 在...

SoapEye 2019-08-19 17:45 評論0 收藏0