美文网首页
【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