实现1像素border

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将伪元素前面的单个修改为双冒号用以区别伪类，但以前的写法仍然有效。