H5开发1像素问题的解决

By | 2016 年 8 月 29 日

1像素的渐变线,做成背景放到页面中,在手机端,线变成2像素。因为手机的DP的机制问题,

解决办法也很简单,背景做成2像素的就好了嘛!1像素线,1像素白底。

或者CSS的after

.bar:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e7e7e7;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .bar:after {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
    .bar:after {
        -webkit-transform: scaleY(.33);
        transform: scaleY(.33)
    }
}

发表回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据