一、为什么会有1px问题
要解决这个问题，必须先补充一个知识点，就是设施的 物理像素[设施像素] & 逻辑像素[CSS像素]；
物理像素：挪动设施出厂时，不同设施自带的不同像素，也称硬件像素；
逻辑像素：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上就显得较粗。
二、解决方案
1.transform: scale(0.5) 计划 - 举荐: 很灵便
1.) 设置height: 1px，依据媒体查问联合transform缩放为相应尺寸。
div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;}2.) 用::after和::before,设置border-bottom：1px solid #000,而后在缩放-webkit-transform: scaleY(0.5);能够实现两根边线的需要
div::after{ content:'';width:100%; border-bottom:1px solid #000; transform: scaleY(0.5);}3.) 用::after设置border：1px solid #000; width:200%; height:200%,而后再缩放scaleY(0.5); 长处能够实现圆角，京东就是这么实现的，毛病是按钮增加active比拟麻烦。
.div::after { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); -webkit-transform-origin: top left;}2.媒体查问 + transfrom
/* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }}3.viewport+rem实现
<html style="font-size:18px;"> <head> <title>1px question</title> <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"> <style> html {font-size: 1px;} * {padding: 0;margin: 0;} .bds_b {border-bottom: 1px solid #ccc;} .a, .b {margin-top: 1rem;padding: 1rem;font-size: 1.4rem;} .a {width: 30rem;} .b {background: #f5f5f5;width: 20rem;} </style> <script> var viewport = document.querySelector("meta[name=viewport]"); //上面是依据设施像素设置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.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); } var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize; </script> </head> <body> <div class="bds_b a">上面的底边宽度是虚构1像素的</div> <div class="b">下面的边框宽度是虚构1像素的</div> </body> </html>4.box-shadow 实现
box-shadow属性的用法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]
参数别离示意: 程度暗影地位，垂直暗影地位，含糊间隔， 暗影尺寸，暗影色彩，将内部暗影改为外部暗影，后四个可选。该例中为何将暗影尺寸设置为正数？设置成-1px 是为了让暗影尺寸稍小于div元素尺寸，这样左右两边的暗影就不会裸露进去，实现只有底部一边有暗影的成果。从而实现分割线成果（单边边框）。
div{ -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);}https://www.jianshu.com/p/31f...
https://segmentfault.com/a/11...