问题：一般在移动端，由于dpr（设备像素比）不为1，在PC端显示1像素的边框，在移动端其实显示为2px。解决这个问题，主要思想是：使用伪元素设置1px的边框，然后使用媒体查询，根据dpr的大小，对边框进行缩放（scaleY）。详细代码如下所示：
App.vue:
商品评价商店@import"./common/stylus/mixin.styl"@import"./common/stylus/base.styl"#app
.tab
display: flex
width:100%
height:40px
line-height:40pxborder-1px(blue)/*!!!!!!*/
.tab-items
flex:1text-align: center
font-size:14px
& > a
display: block
width:100%
color:rgb(77, 85, 93)&.router-link-active
color:rgb(240, 20, 20).seller
border-bottom:1px solid blue /*用于对比，在移动端实际显示2px*/
mixin.styl:
border-1px($color)
position: relative&::afterposition: absolute
left:0bottom:0width:100%content:' 'border-top:1px solid$color//图片的mixin，根据图片的不同dpr进行适配下显示高清问题bg-image($url)
background-image: url($url+"@2x.png")
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3)
background-image: url($url+"@3x.png")
这里的border-1px($color)就是真正处理1像素边框问题的关键，通过伪元素after重做border，并且支持传入颜色变量$color来自定义颜色。
这里的bg-image($url)是负责处理图片在不同dpr下显示的问题，原来跟1像素边框问题差不多，不过这里不需要重做，只是根据不同的media query来调用不同的图片显示，而这些图片是需要放在相对应的文件夹的。
base.styl：进行缩放
body, html
line-height: 1
font-weight: 200
font-family: 'PingFang SC', 'STHeitiSc-Light', 'Helvetica-Light', Arial, sans-serif@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)
这里的修复1像素边框问题会拆分为2个部分，一个部分是这里的base.styl里面处理缩放，另外一部分是在mixin.styl里面处理重做border。
这里是一个base模块文件，只保留了基本的共用的css，需要结合其他的css文件(stylus)来合并理解
dpr一般是1或者2，1.5只是为了更精细的去适配1和2之间的手机型号
网友评论