移動端1px邊框實現

2021-07-28 11:30:51 字數 1400 閱讀 1196

一看上篇博文的發布日期,就知道自己好久沒有寫技術文章了。一是可能工作比較忙,二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。

好了正文從這開始:

如何實現在移動裝置下1畫素的邊框,看到這個命題的時候。我心想那不是很簡單嗎。直接設定css屬性:border:1px solid #bbb;這樣不就實現了嗎。然而現實是殘酷的。在pc狀態下這個css效果是能實現的。但是在移動裝置下。這麼寫是實現不了的。我們來看組對比下。

直接設定1px實現的手持裝置邊框

直接設定1px pc狀態下的邊框。

為了能更清楚的看出差別。我們借用ps來進行測量,效果圖如下,

手機所顯示的1px。

pc顯示的1px:

以上說的1px是border:1px solid #000;的情況 。很明顯就看出來了。那怎麼來實現移動裝置1px邊框呢:方法如下:

然後我們執行在用ps檢測看到的效果是這樣的

很明顯我們成功的完成了移動裝置下的1px。

當然還有許許多多的方法來實現移動裝置下的1px。我只實現了其中一種方式。

移動端1px邊框

以上是我對移動邊框1px的認識。可能道行不深。分析可能有不對的地方。希望大家及時指正。我會立馬修正錯誤。

哎,終於寫完了。下班回去吃飯

實現移動端1px邊框

最近學了一下vue的實戰課程,學習到了其中的乙個頁面設計技巧,覺得深有感觸,於是便寫個部落格記錄下來,以便下次查閱 專案中是通過vue stylus來實現的,那麼首先需要說一下實現原理,因為在移動端中物理畫素是裝置畫素的兩倍,那麼以平時在pc端中設計的1px 在移動端裝置中就是2px了,那麼,我們要...

移動端1px邊框實現

手機端實現真正的一畫素邊框 border 1px,border bottom 1px,border top 1px,border left 1px,border right 1px 線條顏色 黑色 border 1px after,border bottom 1px after,border top...

在移動端實現1px的邊框

由於解析度 dpi 的差異,高畫質手機屏上的 1px 實際上是由 2 2 個畫素點來渲染,有的螢幕甚至用到了 3 3 個畫素點 所以 border 1px 在移動端會渲染為 2px 的邊框 與設計圖產生差異,並且沒有那麼美觀。兩種解決方法 一 transform scale 使用偽類 after 或...