CSS实现1px像素，解决移动端1px线条的显示方式

最新推荐文章于 2025-04-06 21:33:08 发布

原创最新推荐文章于 2025-04-06 21:33:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

15 篇文章

订阅专栏

为什么1px变粗了

相信写移动端的小伙伴会发现移动端css中1px看起来比较粗，这是因为
css里面记录的像素是逻辑像素，而设计师要求的是设备的物理像素。
他们之间存在一个比例关系，可以使用js的window.devicePixelRatio 来获取，也可以使用媒体查询的 -webkit-min-device-pixel-ratio 来获取。当然比例多少与设备相关。在手机上border无法达到我妈想要的效果，这是因为devicePixelRatio 特性导致，IPhone 的 devicePixelRatio == 2，而 border-width: 1px 描述的是设备独立像素，所以 border 被放大到物理像素 2px 显示，在 IPhone 上就显得较粗。
移动端开发常需要在 html 的 header 里添加如下一句：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这句话定义了本页面的 viewport 的宽度为设备宽度，初始缩放值和最大缩放值都为 1，并禁止了用户缩放

如和解决

媒体查询

媒体查询利用设备像素比缩放，设置小数像素

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

缺点：对设备有要求，兼容差

利用box-shadow 和transfrom

.opeixel {
    position: relative;
    top: 50px;
    width: 300px;
}

.opeixel::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 300px;
    box-shadow: 0 0 1px #666;
    transform-origin: 0 bottom;
    transform: scaleY(.5) translateZ(0);
}

/* 设备像素比不小于2 */
@media(min-resolution: 2dppx) {
    .shadow::after {
        box-shadow: 0 0 0 .5px #666;
    }
}

 /* 设备像素比不小于3 */
@media(min-resolution: 3dppx) {
    .shadow::after {
        box-shadow: 0 0 0 0.333333px #666;
    }
}

<span class="opeixel shadow"></span>