本文将带你了解WEBAPP开发之vuejs开发webapp中，1px边框问题 (适合所有m端开发)，希望本文对大家学WEBAPP有所帮助。

1px问题
首先说说，为什么会存在1px的问题，由于现在市场上的移动设备屏幕种类太多，dpr不同，设计师给的稿子，上面明明是1px的线，在高分辨率的屏幕下，可能显示成2px，甚至更大，然而对于有强迫症的设计师，这点是不能容忍的，所以就出现了1px的问题。
1px解决方法有很多，我一般用媒体查询@meaia配合transfomX/Y（）来实现m端的真正1px，这种方法仅限于边框（无圆角），分割线等等，可能有更好的方法，但是我没去研究，有小伙伴了解的，可以分享下哦～
下面说说实现方式：
我用的是stylus，首先要配置vue-cli脚手架的webpack：
在package.js文件中加入
"stylus-loader":"^2.5.0",
"stylus":"0.52.4",

然后
$npminstall

或者直接运行
$npmistylus-loaderstylus--save

配置完webpack记得要重启
$npmrundev

使用stylus要在style标签中作如下配置，


(使用sublime的同学，记得要安装stylus高亮插件，可以使用packageinstall安装，ctrl+shit+p=>输入install选择packageinstall，输入stylus，然后安装，如果不能使用命令安装的，可以手动安装，preference=>浏览资源包，然后下载stylus-master插件//pan.baidu.com/s/1nuXh51J，然后解压在目录当中，重启sublime就可以啦)
下面是实现代码
<--css部分!-->
//因为这个1px边框在项目中可能很多地方都能用到，那么定义一个mixin
border-1px($color)
position:relative
&:after
display:block
position:absolute
left:0
bottom:0
width:100%
border-top:1pxsolid$color
content:''
//定义边框样式
.border-1px
border-1px(rgb(255,222,122))

//媒体查询
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform:scaleY(0.7)
transform:scaleY(0.7)

//-webkit-min-device-pixel-ratio有多个值，可以根据项目需求定义更多的值来适配不同的机型，详细请查看本文最后的参考
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform:scaleY(0.5)
transform:scaleY(0.5)
<--html部分!-->
//使用样式

商品
评价
详情


注意，如果样式表分成多个文件，最好new一个index.styl文件，引入所有样式表，再由入口文件引入index.styl
并且，引入styl文件使用的是
@import'url'

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！