看了{ 再聊移动端页面的适配 }这篇文章，里面提到了postcss-px-to-viewport这个插件，研究

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

postcss-px-to-viewport插件的使用 about mobileweb HOT 1 CLOSED

whidy commented on August 26, 2024

postcss-px-to-viewport插件的使用

from mobileweb.

Comments (1)

whidy commented on August 26, 2024

@Codesboy 我试了下，使用这个插件跟PostCSS其他插件无异。
webpack下只要加入postcss-loader即可，webpack.config.js代码片段如下：

rules: [
  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: [{
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        }
      }, {
        loader: 'postcss-loader'
      }]
    })
  },
  {
    ...
  }
]

postcss.config.js

require('postcss-px-to-viewport')({
  viewportWidth: 750,
  viewportHeight: 1334,
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
}),
...

参考插件说明：postcss-px-to-viewport官方文档
我在我这个项目开了个分支postcss-px-to-viewport-test可以参考下。

from mobileweb.

Recommend Projects