成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 實(shí)現(xiàn) 1px 以內(nèi)的移動

appetizerio / 1563人閱讀

摘要：之前的文章說過關(guān)于行內(nèi)元素垂直方向?qū)R的方案。在上一篇文章里我們提到了內(nèi)的移動問題。屏的移動設(shè)備如何實(shí)現(xiàn)真正的線移動點(diǎn)像素的秘密看完大徹大悟，佩服佩服，思路很多，回到本文重點(diǎn)想一下能實(shí)現(xiàn)移動的方法。

之前的文章說過關(guān)于行內(nèi)元素垂直方向?qū)R的方案。感興趣的可以看我的往期文章。在上一篇文章里我們提到了 1px 內(nèi)的移動問題。本文就一像素內(nèi)的問題給出解決方案。

可能大家看過關(guān)于 Retina 屏幕的一像素邊框問題，注意這里是邊框?qū)挾榷皇且苿釉亍?/p>

什么？border 小于 1px ？

對，因?yàn)榍懊嬗腥私o出相關(guān)方案而且好多種方案，這里不重復(fù)描述實(shí)現(xiàn)原理，給大家兩個鏈接，感興趣的自己跳轉(zhuǎn)。

Retina 屏的移動設(shè)備如何實(shí)現(xiàn)真正 1px 的線？

移動 web 點(diǎn) 5 像素的秘密

看完大徹大悟，佩服佩服，思路很多，回到本文重點(diǎn)

想一下能實(shí)現(xiàn)移動的方法 position(top,right,bottom,left), margin, padding, vertical-align。

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

本著實(shí)踐的原則，上述方案都不可行，在最新的 chrome 中，當(dāng)小于 0.5px 時是 0，當(dāng)大于等于 0.5px 時就變成 1px。

因?yàn)榘咐^于簡單，不做 demo ，感興趣的自己實(shí)踐，相信大家多數(shù)人試驗(yàn)過了。

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

解決方案

也許你早就知道有 transform 的 translate 屬性了。沒錯它就能實(shí)現(xiàn) 1px 內(nèi)的移動！

基本語法：

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

給出本文的 demo 代碼，

截圖如下

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

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

修改如下

得到最終結(jié)果，如下圖

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

總結(jié)

到這里我的方法講完了，在最后歡迎大家討論，方案不止一個， orange 目前只發(fā)現(xiàn)這一個方案，你也可以根據(jù) js 判斷屏幕然后給出 .5 像素的偏移也是可行的，我個人認(rèn)為此方法簡單一些。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111665.html

相關(guān)文章

  • CSS 行內(nèi)對齊的黑魔法

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

    enda 評論0 收藏0

  • 【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（2） 盒模型

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

    mrcode 評論0 收藏0

  • 移動端UI設(shè)計(jì)規(guī)范指南

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

    stonezhu 評論0 收藏0

  • HTML+CSS基礎(chǔ)課程-imooc-【更新完畢】

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

    Heier 評論0 收藏0

  • 【移動適配】一個像素的border怎么實(shí)現(xiàn)

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

    SoapEye 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<