uni-app配置postcss-px-to-viewport

在根目录创建postcss-px-to-viewport.js

内容为

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            unitToConvert: 'px',  // 需要转换的单位,默认为"px"
            viewportWidth: 750, //  设计稿的视口宽度
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', //  希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器
            minPixelValue: 1, // 最小的转换数值,如果为1的话,只有大于1的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值,而不添加备用属性
            exclude: /node_modules/, // 忽略某些文件夹下的文件或特定文件
            include: undefined,  // 如果设置了include,那将只有匹配到的文件才会被转换,例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
            landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: 'vw', // 横屏时使用的单位
            landscapeWidth: 568 // 横屏时使用的视口宽度
        },
        autoprefixer: {}
    }
}
 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以按照以下步骤来配置postcss-px-to-viewport插件的动态参数: 1. 首先,安装必要的依赖包,包括postcsspostcss-loader和postcss-px-to-viewport。你可以使用以下命令进行安装:npm i postcss postcss-loader postcss-px-to-viewport -D。 2. 在webpack配置文件中引入postcss-px-to-viewport插件。你可以使用以下代码来实现引入: const postcssPxToViewport = require("postcss-px-to-viewport"); 3. 在webpack配置文件的module.rules数组中的匹配CSS文件的规则对象中,添加postcss-loader,并配置postcssOptions选项。你可以使用以下代码作为示例: { test: /\.css$/i, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ postcssPxToViewport({ viewportWidth: 320, // 设计稿宽度 unitPrecision: 5, // px转换后的小数保留位数 minPixelValue: 1, // 小于多少像素不转换 selectorBlackList: ["ignore-"], // 有ignore-* 的类名不会被转换 }), ], }, }, }, ], } 通过以上配置postcss-px-to-viewport插件将会根据你指定的参数来动态地将CSS中的像素值转换为vw或rem单位。你可以根据需要进行参数的调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh](https://blog.csdn.net/xuyanl/article/details/129499800)[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* [postcss-plugin-pxtoviewport](https://download.csdn.net/download/weixin_42097508/18666249)[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 ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值