问题描述：为了适配各种屏幕，我们在写代码的时候一般会使用设备无关的像素来对页面进行布局。在设备像素比大于1的屏幕上，我们写的1px实际上是由多个物理像素渲染的，这会导致1px在某些屏幕上看起来很粗。对此有如下解决方案：@mixinborder-1px($color,$direction){position:relative;&::之前{内容：“”；位置：绝对；z-索引：1；@if$direction==all{left:0;顶部：0；边框：1px实心$color；框大小：边框框；变换原点：左上；}@else{背景色：$color;@if$direction==top{left:0;顶部：0；宽度：100%；高度：1px；}@if$direction==right{右：0；顶部：0；宽度：1px；高度：100%；}@if$direction==bottom{左：0；底部：0；宽度：100%；高度：1px；}@if$direction==left{左：0；顶部：0；宽度：1px；高度：100%；}}}}@each$directioninall,top,right,bottom,left{@for$ifrom1to10{$scale:1/$i;@mediaonlyscreenand(-webkit-min-device-pixel-ratio:$i){.border-1px-#{$direction}::b前{@if$direction==all{宽度：$i*100%；高度：$i*100%；变换：规模（$规模）；}@if$direction==top{转换：scaleY($scale);}@if$direction==bottom{转换：scaleY($scale);}@if$direction==right{转换：scaleX($scale);}@if$direction==left{转换：scaleX($scale);}}}}}这个方法可以满足各种场景：第一步：@includeborder-1px(blue,all);引入mixin定义的代码块（创建伪类模拟border）Step2:
