0.1.0 • Published 4 years ago
postcss-adapt v0.1.0
#移动端自适应方案(postcss插件) ###描述
插件作用与整个项目关联的CSS样式,他会把你编写的样式代码中px的内容转换为rem;
当然,我们提供了uncoverSelectors,minPixelValue等参数进行更多定制化的转换规则。
声明: 与账户rybest为同一作者,原账户将不再更新!
###一个不成熟的小建议 这个插件结合flexible.js库实现移动端自适应还是很有趣的,方式虽然不先进,但绝对好用。 ###用例
width: 1080px;
transfrom to: width: 10rem;
###安装
cnpm i -D postcss-pxtrem
或者 npm install --save-dev postcss-pxtrem
或者 yarn add -D postcss-pxtrem
###默认配置
{
viewportWidth: 1080, // 设计稿宽度
unitPrecision: 5, // 转换为rem后的数值小数点位数
minPixelValue: 1, // 小于1像素的值不进行单位转换
viewportUnit: 'rem', // 转换后的单位
uncoverSelectors: [] // 不进行转换的选择器
}
###配置方式
- 在postcss.config.js中:
module.exports = { "plugins": { "postcss-pxtrem": { "viewportWidth": 1080, "unitPrecision": 5, "minPixelValue": 1, "viewportUnit": 'rem', "uncoverSelectors": [] } } }
- 在package.json中:
{ "postcss": { "plugins": { "postcss-pxtrem": { "viewportWidth": 1080, "unitPrecision": 5, "minPixelValue": 1, "viewportUnit": 'rem', "uncoverSelectors": [] } } } }
0.1.0
4 years ago