vue解决苹果手机一像素边框问题

最新推荐文章于 2025-02-24 10:42:22 发布

原创最新推荐文章于 2025-02-24 10:42:22 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何安装Sass并将其集成到Webpack中，通过自定义SCSS混合来解决一像素边框的显示问题。适用于前端开发者，特别是关注网页布局细节的设计师。

安装sass

npm install sass-loader node-sass --save

在build文件夹下的webpack.base.conf.js配置

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

建assets文件下面建一个**.scss文件，文件内容为

@mixin border ($direction:bottom, $color:#e6e6e6,$opacity:1) {
    content: '';
    position: absolute;
    @if $direction == 'left' {
      border-left: 1px solid $color;
      top: 0;
      left: 0;
      height: 100%;
      transform-origin: 0 0;
      opacity: $opacity;
    } @else if $direction == 'bottom' {
      width: 100%;
      border-bottom: 1px solid $color;
      left: 0;
      bottom: 0;
      transform-origin: 0 bottom;
      opacity: $opacity;
    } @else if $direction == 'top' {
      width: 100%;
      border-bottom: 1px solid $color;
      left: 0;
      top: 0;
      transform-origin: 0 bottom;
      opacity: $opacity;
    }@else if $direction == 'right' {
      width: 100%;
      border-right: 1px solid $color;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      opacity: $opacity;
    }
   
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      @if $direction == 'left' {
        height: 200%;
      } @else {
        width: 200%;
      }
      transform: scale(.5);
      @if $direction == 'right' {
        height: 200%;
      } @else {
        width: 200%;
      }
    }
    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
      @if $direction == 'left' {
        height: 300%;
      } @else {
        width: 300%;
      }
      @if $direction == 'right' {
        height: 300%;
      } @else {
        width: 300%;
      }
      transform: scale(.33);
    }
  }
   
  @mixin border-1px($color: #e6e6e6, $borderRadius: 100px) {
    position: relative;
    border-width: 0;
    &:after {
      content: ' ';
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid $color;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      box-sizing: border-box;
      border-radius: $borderRadius;
    }
  }

在需要的解决一像素边框的组件下面引入该文件

@import './assets/**.scss';

用法则为

/* .box是某个需要引入的盒子
	@include border(bottom,black,0.3);
	第一个参数为底部需要的线
	第二个为颜色
	第三个为透明度
*/
.box{ 
  position: relative;
  &::after{
  @include border(bottom,black,0.3);
  }
}