关于移动端1px差异的解决方案
分两种写法
1.通过给父元素设置定位和伪类选择器进行设置
@mixin setTopBorder($color) { & { /*给父元素设置定位*/ position: relative; } /*使用伪类选择器*/ &::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: $color; transform: scaleX(0.5) } } @mixin setBottomBorder($color) { & { position: relative; } &::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: $color; transform: scaleX(0.5) } } .nav { @include setTopBorder(#000); } .nav { @include setBottomBorder(red); }
2.
//通过mixin进行1px的设置
@mixin setTopBorder($color) {
& { border-top: 1px solid $color; }
/*通过媒体查询进行设置*/ @media screen and (-webkit-min-device-pixel-ratio:2) { & { border-top: 0.5px solid $color; } } @media screen and (-webkit-min-device-pixel-ratio:3) { & { border-top: 0.333333px solid $color; } } } @mixin setBottomBorder($color) { & { border-bottom: 1px solid $color; } @media screen and (-webkit-min-device-pixel-ratio:2) { & { border-bottom: 0.5px solid $color; } } @media screen and (-webkit-min-device-pixel-ratio:3) { & { border-bottom: 0.333333px solid $color; } } } .nav { @include setTopBorder(red); @include setBottomBorder(red); }