移动端1px
由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点
所以在手机上真正显示边框的时候不是1px像素，那问题来了，作为开发怎么能忍受有这样的问题出现，至此有几个解决方法，如下：
方法1，border-image
border-image是css3的属性可以用它引入1px的图片，这样就有了1px的边框。
**缺点：**不能随时变换变换的颜色，边框不能写圆角
方法2，transform:scale
使用伪元素:before,:after 实现1px像素，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框，代码如下：
.border-bottom::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e4e4e4;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
//在用media适配不同的设备像素比
/* 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，js动态加载meta
在页面加载时，写上一段js。代码如下：
<script type="text/javascript">
(function() {
var scale = 1.0;
if (window.devicePixelRatio === 2) {
scale *= 0.5;
}
if (window.devicePixelRatio === 3) {
scale *= 0.333333;
}
var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
document.write(text);
})();
</script>
这样也是不错的解决放发
**在一次开发中用到vux-ui这个前端组件里面有处理1px边框的问题，**方法如下
在你项目的App.vue引入，组件内不需要再重复引入。
<style lang="less">
@import '~vux/src/styles/1px.less';
</style>
用的时候直接在要用的盒子上加上相应的类名
类名有
- vux-1px-l 左边框
- vux-1px-r 右边框
- vux-1px-t 上边框
- vux-1px-b 下边框
- vux-1px-tb 上下边框
- vux-1px 全边框