pc端浏览的1px就是1像素，手机端有个dbi的概念，物理像素是设备像素的2倍。
如何在pc开发的时候，在手机上实时预览?
- 前提：手机和电脑连接同一个局域网
- 通过草料二维码生成器生成一个二维码，手机扫码访问
实现移动端1像素
import "相对路径/base.styl"
<div class="class-name border-1px"></div>
<style lang="stylus" rel="stylesheet/stylus">
@import "相对路径/mixin.styl";
.class-name {
border-1px(rgba(7, 17, 27, 0.1))
}
<style>
文件：mixin.styl
border-1px($color)
position: relative
&::after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: " "
文件：base.styl
@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)
@media (-webkit-min-device-pixel-ratio: 2),(-min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
styl格式的文件，使用@import “文件相对路径”的方法，引用其他style文件
伪类和伪元素区别
具体参考：https://blog.csdn.net/zhu_xiao_yuan/article/details/51055424
CSS3将伪元素前面的单个修改为双冒号用以区别伪类，但以前的写法仍然有效。
