巧用transform: scale()

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

移动端font-size小于12px时line-height问题

由于出现的场景是字体小于12px的时候，所以可以将原来包括 font-size 在内的属性放大两倍，再用 scale 缩小一倍

<p>标签</p>

<style>

  p{

    font-size:20px;

    transform: scale(0.5);

    }

</style>

手机端1px问题

 p::before {

    position: absolute;

    top: 0;

    content: ' ';

    width: 100%;

    height: 2rpx;

    background-color: #dee0e3;

    transform: scaleY(0.5);

 }

手机端边框1px

/*单条border样式*/

@mixin border-1px ($color, $direction) {

  content: '';

  position: absolute;

  background: $color;

  @if $direction == left {

    left: 0;

    top: 0;

    height: 100%;

    width: 2px;

    transform: scaleX(0.5);

    transform-origin: left 0;

  }

  @if $direction == right {

    right: 0;

    top: 0;

    height: 100%;

    width: 2px;

    transform: scaleX(0.5);

    transform-origin: right 0;

  }

  @if $direction == bottom {

    bottom: 0;

    left: 0;

    width: 100%;

    height: 2px;

    transform: scaleY(0.5);

    transform-origin: 0 bottom;

  }

  @if $direction == top {

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    transform: scaleY(0.5);

    transform-origin: 0 top;

  }

}

/*四条border样式*/

@mixin all-border-1px ($color, $radius) {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  border: 2px solid $color;

  border-radius: $radius * 2;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  width: 200%;

  height: 200%;

  -webkit-transform: scale(0.5);

  transform: scale(0.5);

  -webkit-transform-origin: left top;

  transform-origin: left top;

}