要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] &逻辑像素[CSS像素]；
1.物理像素：
移动设备出厂时，不同设备自带的不同像素，也称硬件像素；
2.逻辑像素：
即css中记录的像素。
在开发中，为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，通常可以用 javascript 中的 window.devicePixelRatio 来获取，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取。当然，比例多少与设备相关。
在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致，iPhone的 devicePixelRatio==2，而 border-width: 1px描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。
● 用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5)可以实现两根边线的需求
● 用::after设置border：1px solid #000width:200%height:200%,然后再缩放scaleY(0.5)优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。
常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。
（1）像素 （ px ）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
（2）百分比 （ % ），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
（3）em和rem 相对于px更具灵活性，它们都是相对长度单位，它们之间的区别： em相对于父元素，rem相对于根元素。
（4）vw/vh 是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
vw/vh 和百分比很类似，两者的区别：
分辨率又称显示分辨率或屏幕分辨率，它是指水平方向或垂直方向像素的数量。
iPhone6的分辨率是750*1334，大小是4.7英寸。
通过 window.screen.width * window.devicePixelRatio 后者 window.screen.height * window.devicePixelRatio 可以获取到分辨率。
物理像素也可以叫做 设备像素 。
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
逻辑像素也可以叫做 设备独立像素 。
逻辑像素通常是指程序使用的虚拟像素(比如: css像素)。
物理像素和逻辑像素之间存在着一定的对应关系，这个关系叫做设备像素比。
设备像素比(dpr) 是指在移动开发中1个逻辑像素占用多少物理像素。
比如2代表1个css像素用2x2个设备像素来绘制。
让同一张图片，在不同大小、不同分辨率的屏幕显示大小保持一致。
如下图所示：
亚像素是指少于1px的像素。
如何补足少于1px的像素呢？
首先看一个例子，把iPhone4屏幕宽度进行将其七等分。
输出计算宽度与实际渲染宽度。
出现这个结果，是因为各个box宽度计算规则如下：
第六个box的大小缩减为45.7031-0.4845=45.2186px，因此舍入45px，合并到下一个节点宽度为0.2186px；
第七个box的大小扩大为45.7031+0.2186=45.9217px，因此舍入为46px；
这个计算规则来源于 webkit规定的Converting Subpixels to Pixels机制 ，即亚像素(即小数点像素)转换为真实物理像素的两种方法。
示意图如下：
https://quanru.github.io/2016/04/17/%E6%B6%88%E5%A4%B1%E7%9A%841px/
https://quanru.github.io/share/2016-04-15.html
