web移动端1px像素问题解决方案总结

最新推荐文章于 2023-08-25 10:00:25 发布

原创

最新推荐文章于 2023-08-25 10:00:25 发布 · 872 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

在web移动端开发中，1px像素问题源于设备像素比（dpr）导致的逻辑像素与物理像素不一致，影响边框精细度。本文总结了五种解决方案：1) 伪类+transform；2) 0.5px方案；3) viewport + rem；4) postcss-write-svg；5) border-image和background-image。其中，0.5px方案不兼容部分安卓和旧版iOS设备，postcss-write-svg适用于直线。

1px像素问题（解决方法记录）

在web移动端开发中，当我们 css 里写的 1px 的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为 2px，或者 3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同，这样如果在尺寸比较大的设备上，1px 渲染出来的样子相当的粗矿，实现的效果会与UI设计稿的差别比较大，这就是经典的一像素边框问题。

解决方法
1、伪类+transform
使用伪类(:before或:after)结合绝对定位来绘制border，然后通过css3的transform: scale来对伪元素进行缩放

div::after{
   
   
	content: '';
	width: 100%;
	border-bottom: 1px solid #000;
	transform: scaleY(0.5);
}

如果是有圆角的边框，可通过一下方案实现

.div::after {
   
   
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

另可以结合媒体查询来设置不同dpr（设备像素比）的边框缩放比例

/* 2倍屏 */
@media only screen and (-webkit-min-

最低0.47元/天解锁文章

web移动端1px像素问题解决方案总结

1px像素问题（解决方法记录）

1 条评论