可视化自适应方案(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
}
}
}
}