postcss-px-to-viewport的demo
时间: 2023-10-08 09:05:33 浏览: 41
您可以使用以下示例配置来使用postcss-px-to-viewport插件:
```javascript
const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
pxtoviewport({
viewportWidth: 1200,
mediaQuery: true,
landscape: true,
landscapeWidth: 1920
}),
],
},
},
},
};
```
您还可以在项目根目录下的.postcssrc.js文件中进行配置:
```javascript
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: ["wrap"],
minPixelValue: 1,
mediaQuery: true,
replace: true,
exclude: [/node_modules/],
landscape: false
},
},
};
```
您可以根据需要调整配置项,例如设置UI设计稿的宽度(viewportWidth)和需要转换的属性(propList)。 <span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [关于postcss-px-to-viewport的使用经验](https://blog.csdn.net/An_cf/article/details/122259597)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [移动端适配 postcss-px-to-viewport](https://blog.csdn.net/S3328047358/article/details/120162526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]