最近學了一下vue的實戰課程，學習到了其中的乙個頁面設計技巧，覺得深有感觸，於是便寫個部落格記錄下來，以便下次查閱
專案中是通過vue+stylus來實現的，那麼首先需要說一下實現原理，因為在移動端中物理畫素是裝置畫素的兩倍，那麼以平時在pc端中設計的1px ,在移動端裝置中就是2px了，那麼，我們要實現移動端的1px邊框，就需要對這個1px邊框進行縮放。
假如我們有乙個div，我們要設定它在移動端中的1px下邊框，那麼我們可以這麼做
html部分：
"box border-1px"
>
stylus部分：
.box
width 100
% height 40px
position relative
&:after
display block
width 100
% position absolute
left 0
bottom 0
border-top
1px solid rgba(7,17,27,0.1)
content ' '
//使用**查詢畫素比，進行邊框縮放
@media (-webkit
-min
-device
-pixel
-ratio:1.5), (min
-device
-pixel
-ratio:1.5)
.border-
1px &
::after
-webkit
-transform scaley(0.7)
transform scaley(0.7)
@media (-webkit
-min
-device
-pixel
-ratio:2), (min
-device
-pixel
-ratio:2)
.border-
1px &
::after
-webkit
-transform scaley(0.5)
transform scaley(0.5)
移動端1px邊框實現
一看上篇博文的發布日期，就知道自己好久沒有寫技術文章了。一是可能工作比較忙，二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...
移動端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 或...