1px问题

// border =1 在设备像素比为2时为2px

@mixinborder-1px($color) {

position:relative;

&:after{

display:block;

position:absolute;

left:0;

bottom:0;

width:100%;

border-top:1pxsolid$color;

content:"";

}

}// 最小dpr为1.5进行缩放

@media(-webkit-min-device-pixel-ratio:1.5),

(min-device-pixel-ratio:1.5) {

.border-1px{

&:after{

-webkit-transform:scaleY(0.7);//0.7*1.5接近于1px

transform:scaleY(0.7);

}

}

}// 最小dpr为2进行缩放

@media(-webkit-min-device-pixel-ratio:2),

(min-device-pixel-ratio:2) {

.border-1px{

&:after{

-webkit-transform:scaleY(0.5);//0.5*2接近于1px

transform:scaleY(0.5);

}

}

}

调用// @include border-1px(#E7E7E7);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容