如何解决手机retina显示屏下的1px太粗问题

浏览: 141 发布日期: 2017-12-18 分类: css3

Retina

要解决这个问题,我们就要先了解Retina到底是什么?

所谓“Retina”是一种显示技术,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。
在超高清屏(dpr=3)的情况下会用3dp的大小去渲染1px的内容, 因此1px的边框在超高清手机上会被拉伸成3px。所以才会导致我们在某些手机上看到的1px不是真实的1px。
接下来我们可以用下面这个方法来解决这个问题。

  • 对于水平方向的border,可以这样设置

    .weui-grids:before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 1px;
         border-top: 1px solid red;
         -webkit-transform: scaleY(0.5);
         transform: scaleY(0.5);
         -webkit-transform-origin: 0 0; 
         transform-origin: 0 0;   
    
       }
       .weui-grids:after {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         height: 1px;
         border-bottom: 1px solid red;
         -webkit-transform: scaleY(0.5);
         transform: scaleY(0.5);
         transform-origin: 100% 100%;  
       }
  • 对于竖直方向的border,可以这样设置

     .weui-grid:before {
           content: "";
           position: absolute;
           right: 0;
           top: 0;
           bottom: 0;
           width: 1px;
           border-right: 1px solid #D9D9D9;
           -webkit-transform: scaleX(.5);
           transform: scaleX(.5);
           -webkit-transform-origin: 100% 0;
           transform-origin: 100% 0;
         }
    
     .weui-grid:after {
           content: "";
           position: absolute;
           right: 0;
           left: 0;
           bottom: 0;
           height: 1px;
           border-bottom: 1px solid #D9D9D9;
           -webkit-transform: scaleY(.5);
           transform: scaleY(.5);
           -webkit-transform-origin: 0 100%;
           transform-origin: 0 100%;
         }
    

当然这是解决办法之一啦,更多解决方法可参考https://www.cnblogs.com/surfa...

返回顶部