vue 实现手机端 1px (编写PC端的1px,在手机上显示会大于1px)

此处是使用 stylus 预处理器 来预先处理css  -- 此处以 border-bottom:1px solid rgba(0,0,0,.2)来举例

在 项目中的 src文件夹 ---》assets 文件夹  中创建 stylus 文件夹来存放 .styl 文件

在stylus文件夹中新建一个 mixin.styl 文件

border-1px($color)
    position: relative
    &:after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '

在 App.vue文件添加：

<div class="tab border-1px">header</div> // 添加到#app div里面

<style lang="stylus" rel="stylesheet/stylus">
@import "./assets/stylus/mixin.styl";
	.tab
		display: flex
		width: 100%
		line-height: 40px
		height: 40px
		border-1px(rgba(0,0,0,0.2))
</style>

在 stylus文件夹中创建base.styl

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.7)
            t-transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.5)
            t-transform: scaleY(0.5)

再在stylus中定义一个汇总的index.styl文件

@import "./mixin";
@import "./base";

 最后在 main.js中添加 

import 组件名 from "组件" // 在这样的组件下方添加下面这句
import "./assets/stylus/index.styl";

想在手机上预览页面效果，可以将网址复制到  ---  草料二维码网站（免费）中，生成二维码，通过微信扫就可以预览了

  如果生成的二维码受到访问拒绝 ----  意味着您的没有给予 ip地址 访问权限

上一篇文章有介绍 如何配置使用IP地址访问项目