移动端1px边框的解决方案

最新推荐文章于 2023-05-19 13:10:56 发布

future_tgq

最新推荐文章于 2023-05-19 13:10:56 发布

阅读量438

点赞数 1

分类专栏： Css Html 文章标签： css 移动边框

本文链接：https://blog.csdn.net/qq2806000829/article/details/75500883

版权

Css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Html

2 篇文章 0 订阅

订阅专栏

因为设备像素比不同，边框的大小在不同的设备上也不同

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-bottom: 1px solid $color
    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)

主要代码是给一个元素添加一个伪类内容为空然后在media里面根据缩放比例更改scaleY 边框的大小=scalyY*缩放比例
由于最近用到的是stylus 语法上与style有些不同各位可适当参考