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

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

,首先创建一个.postcssrc.js文件,然后配置,例子: 使用前:,使用后:,配置方面,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的方法,希望对大家有所帮助。
更多精彩内容分享:
头条,关注公众号,随时随地在线学习,本教程部分素材来源于网络,版权问题联系站长!,热门课程
查看全部,相关文章,相关视频章节,小妮浅浅,认证0级讲师

文章版权声明

 1 原创文章作者:cmcc,如若转载,请注明出处: https://www.52hwl.com/25293.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年3月7日 下午11:05
下一篇 2023年5月5日 下午3:15