這次帶給大家如何在行動端做出1px邊框的效果，在行動端做出1px邊框的效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
背景
在vue.js 下使用stylus 實作1 像素border 邊框，如果使用css 樣式屬性
border-bottom
實作邊框的話，在PC 瀏覽器上面是一條1 像素邊框（1條細線），但是在行動裝置上面DPI 數值越大，螢幕越清晰。使用這個屬性，在行動裝置上會變成一條很粗的線。
實作方式
方式1: 偽類定位+ 縮放
1、先在要畫邊框的元素上面定義一個偽類，這個是一個絕對定位的, 透過偽類畫了一個1 像素邊框，定位到元素的下邊，就是下邊框
border-1px($color) position: relative
&:after
display: block position: absolute left: 0
bottom: 0
width: 100%
border-top: 1px solid $color content: ' '2、實作一個class 對偽類做縮放。根據設備的最小 DPI ，根據比例對縱軸進行縮放。
@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)方式2 ： 直接用
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是如何在行動端做出1px邊框的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
