1. 程式人生 > >移動端border:1px 解決辦法

移動端border:1px 解決辦法

sass寫法

@mixin border-1px ($color) {
	position:relative;
	&::after{
		diplay:block;
		position:absolute;
		content:"";
		left:0;
		bottom:0;
		width:100%;
		border-top:1px solid $color;
	}
	@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
		&::after{
			-webkit-transform:scaleY(0.7);
			transform:scaleY(0.7);
		}
	}
	@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
		&::after{
			-webkit-transform:scaleY(0.5);
			transform:scaleY(0.5);
		}
	}
}
.ce{
	@include border-1px(red)
}