postcss-px2vw-pv 利用postcss实现 viewport 全新单位 pv

还在为复杂的单位转换头疼吗？
还在为切换不同编辑器，忘记单位转换快捷键而发愁吗？
还在为因开发人员使用不同的单位转换插件配置而产生不同的目标代码而发愁吗？

postcss-px2vw-pv 插件

如果你有以上问题，那么此插件定能帮助你解决问题：此插件使用全新的置换单位pv，用postcss自动对各种复杂css样式做计算与转换，而不必在开发过程中再考虑各种快捷键、编辑器插件以及转换配置等。
更加详细的配置及更新文档，可见官方：https://github.com/pomelott/postcss-px2vw-pv

安装

    npm i postcss-px2vm-pv -D

    yarn add postcss-px2vw-pv --dev

样例

在750宽度的设计稿下，使用500px的宽度， 10px的横向位移

    .box {width: 500pv;transform: translateX(10pv);}

生成的最终样式如下：

    .box {width: 66.666667vw;transform: translateX(1.333333vw);}

配置选项

选项	类型	默认值	描述
width	number	750	设计稿像素宽度
decimal	number	4	换算后小数点后的保留位数

postcss-px2vw-pv 利用postcss实现 viewport 全新单位 pv相关推荐

ISME: 北大吴晓磊组发现囊泡为细菌利用环境血红素提供全新途径
ISME: 北京大学吴晓磊课题组发现囊泡为细菌利用环境血红素提供全新途径 Extracellular heme recycling and sharing across species by nove ...
Ext Js MVC系列二利用Application和Viewport进行应用程序初始化和页面布局
通过上一篇我们已经对Ext js MVC框架开发有了一个大概的了解,这一篇将利用Application和Viewport进行应用程序的初始化和页面布局.我想从以下几方面来进行总结. 1,通过Ext.L ...
Vue3中遇到问题：PostCSS plugin tailwindcss requires PostCSS 8 解决方案
文章目录遇到问题解决方法参考遇到问题 ERROR Failed to compile with 1 error 4:45:27 PMerror in ./src/assets/tailwind ...
什么是postcss？如何使用postcss?
文章目录一.postcss是什么? 二.postcss安装三.postcss的常用插件 1.自动前缀 2. 检测规范内容 3. 图片整合一.postcss是什么? postcss是一个JavaS ...
vue Syntax Error Error PostCSS plugin postcss-pxtorem requires PostCSS 8
vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end- ...
PostCSS plugin postcss-uniapp-plugin requires PostCSS 8
最近刚遇到一个奇葩问题.项目开发开发好好的,突然运行就报错了. Syntax Error: Error: PostCSS plugin postcss-uniapp-plugin requires P ...
Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin。
Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. 问题描述 ...
LPR/IRR/APR/PMT/PV/FV区分，excel中PMT/PV/FV运用，等额本息/等额本金excel计算器
一.IRR/ARR,PV/NPV/FV.PMT/PPMT/IPMT.LPR基础含义 1.LPR.IRR/ARR/EAR.APR. (1)LPR 英文释义 Loan Prime Rate,指贷款市场报价 ...
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8
使用uni-app初始化项目,npm run build:mp-weixin时报错解决:根据错误信息执行 npm install postcss@8.2.2 即可

postcss-px2vw-pv 利用postcss实现 viewport 全新单位 pv

postcss-px2vw-pv 插件

安装

样例

配置选项

postcss-px2vw-pv 利用postcss实现 viewport 全新单位 pv相关推荐

最新文章

热门文章