移动端边框1px过粗问题之min-device-pixel-ratio

有时候我们切的图总是不像UI给的图一样精美, 例如这个1像素边框和下划线问题

因在我们的移动端中css最小1px其实映射为物理像素有2px或3px

可以去了解一下viewport, 在此只给出一种方便的解决方案


/* the start of 1px border */

.border-1px {

    position: relative;

}

.border-1px:after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    border: 1px solid #000000;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transform-origin: left top;

    transform-origin: left top;

}

@media (min-device-pixel-ratio: 1.5),(-webkit-min-device-pixel-ratio: 1.5) {

    .border-1px:after {

        width: calc(100% / 0.7);

        height: calc(100% / 0.7);

        -webkit-transform: scale(0.7);

        transform: scale(0.7);

    }

}

@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) {

    .border-1px:after {

        width: 200%;

        height: 200%;

        -webkit-transform: scale(0.5);

        transform: scale(0.5);

    }

}

/* the end of 1px border */

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.背景图渐变.ui-border-t { border-top: 1px solid #e0e0e0 }.ui-...
    RiverSouthMan阅读 699评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,199评论 0 11
  • 记录与linda师姐的故事(二)弥勒菩萨的黑嘴与拔舌地狱 linda师姐家住北美某城市,30余年一心向道。她将自家...
    莲台缈月阅读 2,110评论 0 1
  • 正值毕业季,作为毕业大军中的一员常常有相熟或陌生学妹学弟问我,学姐呀,我要不要考研呢,其实不仅仅是现在,就在我刚考...
    angus0851阅读 571评论 3 8
  • 翻身下床,溜进父母房中,爬上大床,坐在被子上。宛如孩童时。 “有何事,要与我们分享?”父亲问。 她眼眸流转,并不言...
    作家明至阅读 280评论 0 1