• 技术文章 >头条

    Vue框架在PostCSS中使用sass的方法

    小妮浅浅小妮浅浅2021-07-30 16:16:08原创594

    使用PostCss的原因

    大家都知道转换px单位的插件很多,著名的有postcss-px-to-viewport和postcss-pxtorem,前者是将px转换为vw,后者是将px转换为rem,简化了不常用的配置。将成为vw优先单位,以rem为退货模式。考虑到vw在移动设备上的支持不如rem,这个插件很好的解决了这个问题。然后简单介绍一下。

    安装指令

     $ npm install @ moohng / postcss-px2vw --save-dev

    使用方法

    首先创建一个.postcssrc.js文件,然后配置

    module.exports = {
      plugins: {
        '@moohng/postcss-px2vw': {}
      }
    }

    例子: 使用前:

    .box {
      border: 1px solid black;
      margin-bottom: 1px;
      font-size: 20px;
      line-height: 30px;
    }

    使用后:

    .box{
      border: 1px solid black;
      margin-bottom: 1px;
      font-size: 0.625rem;
      font-size: 6.25vw;
      line-height: 0.9375rem;
      line-height: 9.375vw;
    }

    配置方面

    viewportWidth:对应设计图的宽度,用于计算 vw。默认 750,指定 0 或 false 时禁用 rootValue:根字体大小,用于计算 rem。默认 75,指定 0 或 false 时禁用 unitPrecision:计算结果的精度,默认 5 minPixelValue:小于等于该值的 px 单位不作处理,默认 1 注意:该插件只会转换 px 单位。rootValue 一般建议设置成 viewportWidth / 10 的大小,将设计图分成10等分。由于浏览器有最小字体限制,如果设置得过小,页面可能跟预期不一致

    如果要使用 rem 单位,需要自己通过 js 来动态计算根字体的大小。如果将设计图分成 10 等分计算,那么根字体的大小应该是 window.innerWidth / 10。

    这样一个postCss的插件就配置完成了。

    以上就是Vue框架在PostCSS中使用sass的方法,希望对大家有所帮助。更多精彩内容分享:头条

    专题推荐:vue框架 postcss sass
    品易云
    上一篇:JDK1.8更新推出LongAdder,手把手教你原理 下一篇:合适的IP代理怎么选择?

    相关文章推荐

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网