Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于Retina屏幕下1px的问题 #31

Closed
proYang opened this issue Mar 14, 2018 · 2 comments
Closed

关于Retina屏幕下1px的问题 #31

proYang opened this issue Mar 14, 2018 · 2 comments

Comments

@proYang
Copy link

proYang commented Mar 14, 2018

想问下对于 Retina 屏幕下1px的问题,脚手架中使用的是什么解决方案 ❓

@booxood
Copy link
Collaborator

booxood commented Mar 15, 2018

模板中有提供 mixin

/**
 * 1像素边框
 * @param  {string} $position [边框位置,取值:top, bottom, left, right, full]
 * @param  {string} $borderColor [边框颜色]
 * @param  {number} $raidus [圆角]
 *
 * 例子:
 *   @include border(top, #ddd);
 *   @include border(full, #ddd, 2px);
 */
@mixin border($position: full, $borderColor: #ddd, $radius: 0) {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-color: $borderColor;

  @if $position == top {
    height: 1px;
    left: 0;
    right: 0;
    top: 0;

    @media only screen and (-webkit-min-device-pixel-ratio:2) {
      & {
        transform: scaleY(0.5);
        transform-origin: 50% 0%;
      }
    }
  } @else if $position == bottom {
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;

    @media only screen and (-webkit-min-device-pixel-ratio:2) {
      & {
        transform: scaleY(0.5);
        transform-origin: 50% 100%;
      }
    }
  } @else if $position == left {
    width: 1px;
    top: 0;
    bottom: 0;
    left: 0;

    @media only screen and (-webkit-min-device-pixel-ratio:2) {
      & {
        transform: scaleX(0.5);
        transform-origin: 0% 50%;
      }
    }
  } @else if $position == right {
    width: 1px;
    top: 0;
    bottom: 0;
    right: 0;

    @media only screen and (-webkit-min-device-pixel-ratio:2) {
      & {
        transform: scaleX(0.5);
        transform-origin: 100% 50%;
      }
    }
  } @else if $position == full {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
    border: 1px solid #ddd;
    border-color: $borderColor;

    @if $radius != 0 {
      border-radius: $radius;
    }

    @media only screen and (-webkit-min-device-pixel-ratio:2) {
      & {
        right: -100%;
        bottom: -100%;
        transform: scale(0.5);
        transform-origin: 0% 0%;

        $radiusx2: null;
        @each $i in $radius {
          $radiusx2: append($radiusx2, $i * 2);
        }

        @if $radius != 0 {
          border-radius: $radiusx2;
        }
      }
    }
  }
}

@booxood booxood closed this as completed Apr 10, 2018
@booxood
Copy link
Collaborator

booxood commented Apr 10, 2018

没问题先关闭了

@booxood booxood reopened this Apr 10, 2018
@booxood booxood closed this as completed Apr 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants