移动端设备1px解决代码

最新推荐文章于 2021-10-11 14:28:22 发布

东风吹更白

最新推荐文章于 2021-10-11 14:28:22 发布

阅读量152

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_41957432/article/details/109327283

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近看到产品UI测试小姐姐一起围着新来的单身前端同学，深入探讨为啥写的1px在IOS上面频繁翻车。看着据理力争写的就是1px的前端和围成一圈的小姐姐，不由得感叹小年轻怎么那么鸡贼。。。
在这里插入图片描述

简介

回归正题，在做移动端页面时，由于设备屏幕的设备像素比（DPR）的不同，需要对不同的页面做兼容，这也是导致各种设备上面1px边框问题出现的原因。这里先不谈如何对移动端设备做兼容，也不谈什么是设备像素、什么是逻辑像素、什么是设备独立像素，只简单介绍下遇到1px边框问题的常用解决方案。ctrl+c ctrl+v 就能让小姐姐们不在打扰你coding。。。

上代码

	  .border-1px,
      .border-top-1px,
      .border-bottom-1px,
      .border-left-1px,
      .border-right-1px {
        position: relative;
      }
      .border-top-1px::after {
        content: '';
        position: absolute;
        left: 0;
        border-bottom: 1px solid #000;
        width: 100%;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }
      .border-bottom-1px::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid #000;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }
      .border-left-1px::after {
        content: '';
        position: absolute;
        top: 0;
        border-left: 1px solid #000;
        height: 100%;
        transform: scaleX(0.5);
        -webkit-transform: scaleX(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }
      .border-right-1px::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-left: 1px solid #000;
        height: 100%;
        transform: scaleX(0.5);
        -webkit-transform: scaleX(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }
      .border-1px::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #000;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        -webkit-transform: scaleX(0.5);
        transform-origin: left top;
        -webkit-transform-origin: left top;
      }

在这里插入图片描述

上述代码安到你的div上面就能用，但是注意伪元素的占用问题。还有一点，这种方法只是处理了DPR=2的设备，但实际显示效果也足够赶走产品 UI了。

优化

可以用媒体查询对这中方法做进一步优化

@media screen and (-webkit-min-device-pixel-ratio: 2){
	......
}
@media screen and (-webkit-min-device-pixel-ratio: DPR){
	......此处需要修改为 伪代码 transform: scale(1/DPR);
}