scss实现retina屏1px边框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
|
@mixin _border-scale($dpr) { width: 100% * $dpr; height: 100% * $dpr;
-webkit-transform: scale(1 / $dpr); -webkit-transform-origin: 0 0; transform: scale(1 / $dpr); transform-origin: 0 0; }
@mixin _border-base() { content: ""; position: absolute; top: 0; left: 0; pointer-events: none; }
@mixin retina-border($top: 0, $right: 0, $bottom: 0, $left: 0, $cor: #000000) { position: relative;
&::before { border-top: #{$top}px solid $cor; border-right: #{$right}px solid $cor; border-bottom: #{$bottom}px solid $cor; border-left: #{$left}px solid $cor;
@include _border-base();
@media screen and (-webkit-min-device-pixel-ratio: 1) { @include _border-scale(1); }
@media screen and (-webkit-min-device-pixel-ratio: 1.5) { @include _border-scale(1.5); }
@media screen and (-webkit-min-device-pixel-ratio: 2) { @include _border-scale(2); }
@media screen and (-webkit-min-device-pixel-ratio: 3) { @include _border-scale(3); }
} }
|