0.1.4 • Published 4 years ago
postcss-adapt-datav v0.1.4
可视化自适应方案(postcss插件)
描述
插件作用于整个项目关联的CSS样式,他会把你编写的样式代码中px的内容转换为vw,
hpx转换为vh来达到自适应效果;当然,我们提供了uncoverSelectors,minPixelValue等参数
进行更多定制化的转换规则。
声明: 与账户rybest为同一作者,原账户将不再更新!
用例
width: 1920px;
transfrom to: width: 100vw;
height: 1920px;
transform to: height: 100vw;
height: 1080hpx;
transform to: height: 100vh;
安装
cnpm i -D postcss-adapt-datav
或者 npm install --save-dev postcss-adapt-datav
或者 yarn add -D postcss-adapt-datav
默认配置
{
viewportWidth: 1920, // 设计稿宽度
viewportHeight: 1080, // 设计稿高度
unitPrecision: 6, // 转换后的数值小数点位数
viewportUnitWidth: "vw", // px转换后的单位
viewportUnitHeight: "vh", // hpx转换后的单位
uncoverSelectors: [], // 不进行转换的选择器
fixedSize: false // true:转换为固定尺寸项目 false: 自适应项目
}
配置方式
- 在postcss.config.js中:
module.exports = { "plugins": { "postcss-adapt-datav": { "viewportWidth": 1920, "viewportHeight": 1080, "unitPrecision": 6, "viewportUnitWidth": "vw", "viewportUnitHeight": "vh", "uncoverSelectors": [], "fixedSize": false } } }
- 在package.json中:
{ "postcss": { "plugins": { "postcss-adapt-datav": { "viewportWidth": 1920, "viewportHeight": 1080, "unitPrecision": 6, "viewportUnitWidth": "vw", "viewportUnitHeight": "vh", "uncoverSelectors": [], "fixedSize": false } } } }