美文网首页
【CSS】移动端1像素线

【CSS】移动端1像素线

作者: 大Q本Q | 来源:发表于2019-07-05 16:54 被阅读0次

.content h1:after,
.content h2:after {
    border-top: 1px solid #bfbfbf;
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0), 
only screen and (min--moz-device-pixel-ratio: 2.0), 
only screen and (-o-min-device-pixel-ratio: 200/100), 
only screen and (min-device-pixel-ratio: 2.0) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.33333334);
        transform: scaleY(0.33333334);
    }
}

相关文章

网友评论

      本文标题:【CSS】移动端1像素线

      本文链接:https://www.haomeiwen.com/subject/wtwehctx.html