版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
1px兼容问题
博客地址:https://www.cnblogs.com/katydids/p/9948546.html
// $border-poses:top,
// right,
// bottom,
// left;
// $color:red;
@mixin border-1px($poses:$border-poses, $color:$color) {
position: relative;
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
@each $pos in $poses {
border-#{$pos}: 1px solid $color;
#{$pos}: 0;
}
}
}
@media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio: 1) {
.border-1px &::after {
width: 100%;
height: 100%;
transform: scale(1);
}
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio: 2) {
.border-1px &::after {
width: 200%;
height: 200%;
transform: scale(0.5);
}
}
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio: 3) {
.border-1px &::after {
width: 300%;
height: 300%;
transform: scale(0.333);
}
}
//用法
@import '~../../../assets/global-styles/sass/border.scss';
.footer-box {
width: 100%;
height: .48rem;
@include border-1px(top,#ccc);
}