移动端1像素问题

最新推荐文章于 2024-05-30 15:07:12 发布

咕噜咕噜的车轮向前

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量178

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/zhongmei121/article/details/128472405

版权

// less
// 1像素边框在不同设备显示的问题
com-border-1px( borderColor = #000,borderRadius = 0rpx ){
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  &:before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: borderRadius;
    box-sizing: border-box;
    border: 1px solid borderColor;
  }
  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    &:before {
      width: 200%;
      height: 200%;
      border-radius: borderRadius *2;
      transform: scale(0.5);
      box-sizing: border-box;
      border: 1px solid borderColor;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio:3) {
    &:before {
      width: 300%;
      height: 300%;
      border-radius: borderRadius*3;
      transform: scale(0.33);
      box-sizing: border-box;
      border: 1px solid borderColor;
    }
  } 
}

// 1像素横线在不同设备显示的问题
com-line-1px( width = 100%, bgColor = #000 ){
  width: width;
  height: 1px;
  background: bgColor;
  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    transform: scaleY(0.5);
  }
  @media only screen and (-webkit-min-device-pixel-ratio:3) {
    transform: scaleY(0.33);
  } 
}

// 1像素竖线在不同设备显示的问题
com-width-1px( height = 100%, bgColor = #000 ){
  width: 1px;
  height: height;
  background: bgColor;
  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    transform: scaleX(0.5);
  }
  @media only screen and (-webkit-min-device-pixel-ratio:3) {
    transform: scaleX(0.33);
  } 
}