前端解决一像素问题

神の愛

于 2022-10-22 16:43:23 发布

阅读量239

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/zhurenjin/article/details/127463898

版权

本文介绍了如何利用CSS伪类:after或:before创建1px边框，并结合媒体查询及transform:scale在不同设备像素比下实现响应式效果。这种方法适用于创建直线边框，但不支持圆角，常用于制作分割线。

摘要由CSDN通过智能技术生成

一、transform:scale

使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框

首先用伪类创建边框

.border-bottom{
    position: relative;
    border-top: none !important;
}

.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

然后通过媒体查询来适配

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

这种办法的边框并不是真正的 border，而是高度或者宽度为 1px 的块状模型，所以这种办法不能做出圆角，一般都用来画分割线