移動端1px實現

新增css 1px邊框時，在手機上顯示為粗線，解決辦法就是利用偽類設定1px邊框，然後根據裝置畫素比進行y軸的縮放，使其表現為真正的1px.

1.定義乙個函式。（找到要加1px的標籤，新增定位和偽類。）

border-1px($color)

position: relative
&:after
display: block
position: absolute
left:
0bottom:
0width:
100%
border-top: solid 1px $color
content:
''

.tab

display: flex
width: 100%
height: 40px
border-1px(rgba(7, 17, 27, 0.1))

@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)

class="tab border-1px">div>

5.在手機上檢視，邊框為細線。

移動端1px邊框實現

一看上篇博文的發布日期，就知道自己好久沒有寫技術文章了。一是可能工作比較忙，二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...

實現移動端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...