在新项目中应用了mand-mobile，出现字体和内容区域大一倍问题

[shuxinyun]

mand-mobile version/项目版本 1.0.6 os version & browser version/操作系统版本&浏览器版本 windows10，Opera node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常) node,npm recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤 我按照官网指示，把mand-mobile引入新项目，按钮可以显示，点击出现预期窗体，但是按钮大一倍，显示内容窗体也大一倍，查看官网例子有zoom:.6,但我的网页中没有，不知道这个是如何设置控制的 expectant behaviors/期待行为

actual behaviors/实际行为

[shuxinyun]

我是按需引入的

[xxyan0205]

官网的demo是为了将移动端的页面在pc端展示进行了固定比例的缩放。mand-mobile产出包样式单位是px，可根据实际的需要做响应式适配(转换rem)，具体可以参考px to rem

[shuxinyun]

我按如下设置了webpack.dev.conf.js var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') const poststylus = require('poststylus') const pxtorem = require('postcss-pxtorem') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) })

const pxtoremConfig = pxtorem({ rootValue: 100, propWhiteList: [] })

module.exports = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development devtool: '#cheap-module-eval-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), new webpack.LoaderOptionsPlugin({ options: { stylus: { use: [poststylus(pxtoremConfig)] } } }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), new FriendlyErrorsPlugin() ] })

[shuxinyun]

这里是否我需要调整 rootValue的值

[xxyan0205]

产出包中的样式已经是css文件，所以不能使用poststylus做px2rem的转换，需要使用postcss, 可在工程根目录添加.postcssrc.js文件，内部添加如下配置：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 100,
      propWhiteList: []
    })
  ]
}

[webaifei]

提供一个解决方案： 修改postcss.config.js

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
    let remUnit;
    if (file && file.dirname && file.dirname.indexOf("mand-mobile")>-1) {
        remUnit = 75;
    } else {
        remUnit = 37.5;
    }
    return {
        plugins: [
            px2rem({
                remUnit: remUnit,
            }),
            AutoPrefixer({
                browsers: ["last 20 versions", "android >= 4.0"]
            })
        ]
    };
};