移动端 1px问题？？？

1px问题归根结底是设备不同导致的问题，导致我们在不同设备上渲染出的结果可能大于或小于1px；

首先我们了解几个基本的概念

• 像素：图像显示的基本单位，1像素是显示的最小区域；
• 物理像素：设备的我屋里像素，每个设备的物理像素都是厂商固定好的；
• css像素：主要是用于我们编码，约定好的显示在设备上的单位，screen.width可获取的像素；
• 设备像素比DPR(devicePixelRatio)  = 物理像素 / css像素 ，它是默认缩放为100%的屏幕下，设备像素和css像素的比值。在retina屏的手机上, dpr为2或3，css里写的1px宽度映射到物理像素上就有2px或3px宽度。

总结一下如何解决1像素的问题，当然都是借鉴别人写过的方法；

1、0.5px 方案

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

2、viewport + rem 方案

该方案是对上述方案的优化，整体思路就是利用viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态如下：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

下面实现rem计算根元素字体大小的位置

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

3、伪元素方式 boder 1px scale（0.5）

<div class="cell border-1px"> cell <div>

<style>
.cell {
    width: 100px;
    height: 100px;
}
<!--全部边框-->
.border-1px:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
}

<!--单边框，以上边框为例-->
.border-1px-top:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid red;
    transform: scaleY(.5);
    transform-origin: left top;
}
</style>

4、border-image方式

.border-image-1px {
    border-width: 0 0 1px 0;
    border-image: url(linenew.png) 0 0 2 0 stretch;

5、UI库通用的方案，我们在写移动端组件时候尽量用标准库，兼容性更好

antd-design-mobile

 border-top: 1PX solid #ccc;

vant

transform: scale(0.5);

转载来自于 https://www.jianshu.com/p/53074e846b03