移动端1像素实现

.bor-bottom{
    position: relative;
    border-top: none !important;
  }

  .bor-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.5) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.33333334);
      transform: scaleY(0.33333334);
    }
  }
  /* 3倍屏 */
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
    }
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端开发中,实现1像素的效果是为了解决高分辨率屏幕下的线条模糊或者过粗的问题。下面是一些常见的实现方式: 1. 使用 CSS3 的 transform 进行缩放:可以使用 `scale` 属性将元素缩放到所需的大小,例如 `scale(0.5)` 即为缩放到原来的一半大小。然后再将元素的实际大小设置为 2 像素,这样在高分辨率屏幕上显示时,就会以 1 像素的精度显示。 2. 使用 viewport 的 meta 标签:在 HTML 文件的头部添加如下 meta 标签,可以将屏幕的物理像素与 CSS 像素进行等比缩放匹配,从而实现1像素的效果。 ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` 3. 使用 CSS3 的 border-image:可以使用 `border-image` 属性为元素的边框设置一张1像素的图片作为边框样式,从而实现1像素的效果。例如: ```css .border-1px { border-width: 1px; border-style: solid; border-image: url(border.png) 2 repeat; } ``` 4. 使用 CSS3 的伪类和 transform 进行缩放:可以使用 `::after` 伪类为元素添加一个宽度为1像素的伪元素,然后使用 `scale` 属性将其缩放到所需的大小。例如: ```css .border-1px::after { content: ''; display: block; width: 200%; height: 1px; background: #000; transform: scale(0.5); transform-origin: top left; } ``` 这些方法都可以用来实现移动端的1像素效果,具体选择哪种方法,可以根据实际情况和需求来决定。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值