如何在行動端做出1px邊框的效果

這次帶給大家如何在行動端做出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 ： 直接用

實現 border

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

ES6的set資料結構與map資料結構

ES6裡關於數字新增判斷詳解

commonJS與es6規範的引入導出

以上是如何在行動端做出1px邊框的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！