移动端border：1px 解决办法

最新推荐文章于 2025-06-14 11:14:06 发布

田二黑

最新推荐文章于 2025-06-14 11:14:06 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34829112/article/details/76585262

本文介绍了一种使用Sass实现响应式1px视觉效果的边框技巧，通过伪元素结合媒体查询来适配不同设备像素比，确保在高清屏幕上也能保持良好的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
}